Lightning Design System スタイル設定フックを使用したコンポーネントのスタイル設定

Salesforce Lightning Design System (SLDS) スタイル設定を使用すると、コンポーネントのスタイル設定を容易にカスタマイズしてブランドを表現することができます。スタイル設定フックには、SLDS コンポーネントブループリントと設計バリエーションに対応する CSS カスタムプロパティが用意されています。SLDS スタイルをカスタマイズするには、コンポーネントのスタイルシートで対応するカスタムプロパティを宣言します。カスタムプロパティを使用して、基本コンポーネントとカスタムコンポーネントのスタイルを設定できます。

Lightning 基本コンポーネントのスタイルを変更するには、最初にコンポーネントに設計バリエーションがあるかどうかを確認します。コンポーネントのスペーシング (位置揃え、パディング、余白、タイポグラフィなど) を変更するには、Lightning Design System ユーティリティクラスを確認します。これらの手法が使用事例に適していない場合は、SLDS スタイル設定フックを試します。

スタイル設定フックは、var(--slds-c-badge--color-background, #ecebea) などの SLDS スタイルシートのプレースホルダで、対応する --slds-c-badge-color-background CSS カスタムプロパティを使用してスタイルをカスタマイズできます。

CSS カスタムプロパティは、SLDS コンポーネントブループリントとその設計バリエーションに対応します。たとえば、--slds-c-button-brand-* カスタムプロパティは、ブランドバリエーションを持つボタンブループリントに対応します。

背景色を標準の Salesforce ブルーに変換するブランドバリエーションを持つ SLDS ボタンブループリントを実装する Lightning Web コンポーネントを見てみましょう。

次の例に示すように SLDS クラスを直接上書きしないでください。

/* myButton.css */
/* Anti-pattern - Don't do this */
.slds-button_brand {
  background-color: purple;
}

SLDS のクラスと基本コンポーネントの内部が将来のリリースで変更される可能性があるため、CSS オーバーライドはサポートされていません。CSS オーバーライドは、今後旧式となり、意図したとおりに動作しなくなる可能性があります。

代わりに、次の例のように CSS カスタムプロパティを使用します。

異なる背景色をブランドバリエーションに適用するには、対応する CSS カスタムプロパティである --slds-c-button-brand-color-background を指定します。コンポーネント内のすべての要素をカスタムスタイルの対象とするには、:host セレクタを使用します。

代わりに、要素やカスタムクラスなど、他のセレクタを使用してカスタマイズを範囲設定することもできます。

基本コンポーネントは、SLDS コンポーネントブループリントを実装して SLDS スタイルを使用します。lightning-button などの基本コンポーネントの SLDS スタイルをカスタマイズするには、対応する CSS カスタムプロパティを使用します。

スタイル設定フックの完全なリストについては、各コンポーネントのブループリントを参照してください。たとえば、ボタンのスタイル設定フックのリストは lightningdesignsystem.com/components/buttons/#Styling-Hooks-Overview にあります。スタイル設定フックについての詳細は lightningdesignsystem.com/platforms/lightning/styling-hooks/ を参照してください。

コンポーネントブループリント

次の 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 の各コンポーネントで使用されます。

基本コンポーネントに Lightning Design System を実装する方法については、基本コンポーネントレシピの GitHub リポジトリを参照してください。対話型の例については、「コンポーネントの参照」を参照してください。

関連トピック

コンポーネントのスタイル設定フックの作成