CSS の移行

Lightning Web コンポーネントでは標準の CSS 構文が使用されます。Aura コンポーネントのみで使用される THIS クラスを削除します。

以下は、Aura コンポーネントの CSS ファイルです。

移行された Lightning Web コンポーネントの CSS ファイルは、THIS が削除されている点を除いて同じです。

現在、すべての基本コンポーネント間で CSS ファイルを移行することはできません。次の lightning:button Aura マークアップを移行するとします。

lightning:button は、次の CSS セレクタを使用します。

lightning-button Lightning Web コンポーネントを使用すると、カスタムクラスが lightning-button コンポーネントの外部要素に適用されます。つまり、lightning-button マークアップで想定されるスタイル設定が表示されません。

このケースでは、lightning-button の variant 属性を使用することをお勧めします。たとえば、destructive バリエーションを使用して、背景色を赤にします。

基本コンポーネントの CSS の移行が機能する別の例を見てみましょう。たとえば、次の lightning:formattedAddress マークアップがあるとします。

このコンポーネントは、次の CSS セレクタを使用します。

class 属性を使用して、カスタムスタイル設定を適用します。

関連トピック

• CSS スタイルシートによるコンポーネントのスタイル設定