Lightning Design System スタイル設定フックを使用したコンポーネントのスタイル設定
Salesforce Lightning Design System (SLDS) スタイル設定を使用すると、コンポーネントのスタイル設定を容易にカスタマイズしてブランドを表現することができます。スタイル設定フックには、SLDS コンポーネントブループリントと設計バリエーションに対応する CSS カスタムプロパティが用意されています。SLDS スタイルをカスタマイズするには、コンポーネントのスタイルシートで対応するカスタムプロパティを宣言します。カスタムプロパティを使用して、基本コンポーネントとカスタムコンポーネントのスタイルを設定できます。
スタイル設定フックは、var(--slds-c-badge--color-background, #ecebea)
などの SLDS スタイルシートのプレースホルダで、対応する --slds-c-badge-color-background
CSS カスタムプロパティを使用してスタイルをカスタマイズできます。
CSS カスタムプロパティは、SLDS コンポーネントブループリントとその設計バリエーションに対応します。たとえば、--slds-c-button-brand-*
カスタムプロパティは、ブランドバリエーションを持つボタンブループリント に対応します。
コンポーネントレベルのスタイル設定フックと色のグローバルスタイル設定フック
コンポーネントレベルのスタイル設定フック (--slds-c-*
) によって、特定のコンポーネントのプロパティを更新することができます。たとえば、1 つのボタンの境界線を太くするには、そのボタンのコンポーネントフックを編集します。この変更は他のコンポーネントには適用されません。Lightning Design System の「Styling Hooks (スタイル設定フック)」 を参照してください。
色のグローバルスタイル設定フック (--slds-g-*
) は、アプリケーションでグローバルに使用するために事前定義された値です。たとえば、アプリケーションのブランドを変更するために、グローバルフックによって、使用しているすべてのコンポーネントに変更を加えることができます。Lightning Design System の「Global Color Styling Hooks (色のグローバルスタイル設定フック)」 を参照してください。
色をカスタマイズする場合は、Web コンテンツアクセシビリティのガイドライン (WCAG Content Accessibility Guidelines) 2.1 のテキストおよび非テキストの色のコントラスト基準に合わせることをお勧めします。Lightning Design System の「Migration Guide (移行ガイド)」 を参照してください。
コンポーネントレベルのスタイル設定フックの例
背景色を標準の Salesforce ブルーに変換するブランドバリエーションを持つ SLDS ボタンブループリントを実装する Lightning Web コンポーネントを見てみましょう。
< template>
< button class = " slds-button slds-button_brand" > Submit</ button> </ div>
</ template>
次の例に示すように SLDS クラスを直接上書きしないでください。
.slds-button_brand {
background-color : purple ;
}
SLDS のクラスと基本コンポーネントの内部が将来のリリースで変更される可能性があるため、CSS オーバーライドはサポートされていません。CSS オーバーライドは、今後旧式となり、意図したとおりに動作しなくなる可能性があります。
代わりに、次の例のように CSS カスタムプロパティを使用します。
異なる背景色をブランドバリエーションに適用するには、対応する CSS カスタムプロパティである --slds-c-button-brand-color-background
を指定します。コンポーネント内のすべての要素をカスタムスタイルの対象とするには、:host
セレクタを使用します。
:host {
--slds-c-button-brand-color-background : purple ;
--slds-c-button-brand-color-border : purple ;
}
代わりに、要素やカスタムクラスなど、他のセレクタを使用してカスタマイズを範囲設定することもできます。
基本コンポーネントは、SLDS コンポーネントブループリントを実装して SLDS スタイルを使用します。lightning-button
などの基本コンポーネントの SLDS スタイルをカスタマイズするには、対応する CSS カスタムプロパティを使用します。
< template>
< lightning-button variant = " brand" label = " Submit" onclick = { handleClick} > </ lightning-button>
</ template>
:host {
--slds-c-button-brand-color-background : orange ;
--slds-c-button-brand-color-border : orange ;
}
サポートの制限事項
コンポーネントブループリント
次の Lightning Design System コンポーネントブループリントとそれらの CSS カスタムプロパティは、基本コンポーネントではサポートされていません。
モーダル — モーダルコンポーネントブループリントは、基本コンポーネントに一致しません。
トースト — lightning/platformShowToastEvent
モジュールでは --slds-c-toast-*
カスタムプロパティはサポートされません。
ツールチップ — lightning-helptext
コンポーネントでは --slds-c-tooltip-*
カスタムプロパティはサポートされません。
リンク
カスタムプロパティを使用するリンクのスタイル設定は、サポートされていません。リンクは、lightning-breadcrumb
や lightning-formatted-*
などの基本コンポーネントと、lightning/navigation
モジュールで使用されます。
フォーム要素
カスタムプロパティを使用するフォーム要素のスタイル設定はサポートされていません。フォーム要素は、lightning-input-*
、lightning-checkbox-group
、lightning-radio-group
、lightning-textarea
の各コンポーネントで使用されます。
関連トピック