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

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

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

Tip

スタイル設定フックは、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:Web Content Accessibility Guidelines) 2.1 のテキストおよび非テキストの色のコントラスト基準に合わせることをお勧めします。Lightning Design System の「Migration Guide (移行ガイド)」を参照してください。

コンポーネントレベルのスタイル設定フックの例

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

1<!-- myButton.html -->
2<template>
3  <button class="slds-button slds-button_brand">Submit</button></div>
4</template>

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

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

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

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

Important

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

1/* myButton.css */
2:host {
3  --slds-c-button-brand-color-background: purple;
4  --slds-c-button-brand-color-border: purple;
5  /* Other CSS custom properties here */
6}

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

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

1<!-- myBaseButton.html -->
2<template>
3  <lightning-button variant="brand" label="Submit" onclick={handleClick}></lightning-button>
4</template>

1/* myBaseButton.css */
2:host {
3  --slds-c-button-brand-color-background: orange;
4  --slds-c-button-brand-color-border: orange;
5  /* Other CSS custom properties here */
6}

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

Note

サポートの制限事項

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

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

関連トピック

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

The Japanese Summer '24 guide is now live

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