CSS の移行

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

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

1.THIS .red {
2  background-color: red;
3}
4
5.THIS .blue {
6  background-color: blue;
7}
8
9.THIS .green {
10  background-color: green;
11}

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

1.red {
2  background-color: red;
3}
4
5.blue {
6  background-color: blue;
7}
8
9.green {
10  background-color: green;
11}

Lightning 基本コンポーネントの CSS の移行

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

1<lightning:button label="Reset" class="buttonColor buttonText"/>

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

1.THIS .buttonColor {
2  background-color: red;
3}
4
5.THIS .buttonText {
6  color: lightgray;
7}

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

1<!-- Custom styling does not work here -->
2<lightning-button label="Reset" class="buttonColor buttonText"></lightning-button>

カスタム CSS が自動的に独自のコンポーネントに範囲設定され、基本コンポーネントの内部のスタイルが設定されません。可能な場合は、Lightning Design System クラスまたは Lightning 基本コンポーネントのバリエーションを使用することをお勧めします。

Note

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

1<lightning-button label="Reset" variant="destructive"></lightning-button>

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

1<div class="mailingAddress">
2  <lightning:formattedAddress
3    street="1 Market St."
4    city="San Francisco"
5    country="US"
6    province="CA"
7    postalCode="94105"
8  />
9</div>

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

1.THIS .mailingAddress a {
2  color: red;
3}

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

1<!-- Custom styling works here -->
2<lightning-formatted-address
3  class="mailingAddress"
4  street="121 Spear St."
5  city="San Francisco"
6  country="US"
7  province="CA"
8  postal-code="94105"
9></lightning-formatted-address>

1.mailingAddress {
2  color: red;
3}

関連トピック

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

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。