Lightning Design System (LDS) のスタイリングフックを使ったコンポーネントのスタイル設定

Lightning Design System (LDS) は、Salesforceが提供するデザインフレームワークで、統一されたUI設計を簡単に実現できます。特に Styling Hooks（スタイリングフック）は、LDSコンポーネントの見た目をカスタマイズするための強力な手段です。本記事では、スタイリングフックを使用してコンポーネントのスタイルを調整する方法について説明します。

---

1. スタイリングフックとは？

スタイリングフックは、CSS変数を使ってLDSのデフォルトスタイルを上書きできる仕組みです。これにより、コンポーネントのカラー、スペーシング、フォントサイズなどを柔軟にカスタマイズできます。

例:

--slds-c-button-brand-color-background: orange;

---

2. スタイリングフックの主な利点

• 一貫性: LDSの基準に基づきつつ、独自のスタイルを適用可能。
• メンテナンス性: 一箇所の変更で、同じフックを使用する複数のコンポーネントに影響を与える。
• 柔軟性: アプリケーションや特定のコンポーネントに限定したカスタマイズが可能。

---

3. スタイリングフックの使用例

以下は、Lightning Web Components (LWC) でスタイリングフックを適用する基本的な方法です。

HTMLファイル

<lightning-button variant="brand" label="テストボタン" class="dynamic-button" onclick={changeButtonColor}></lightning-button>

CSSファイル

:host {
    --slds-c-button-brand-color-background: orange;
    --slds-c-button-brand-color-border: orange;
}

結果

上記のコードでは、lightning-button コンポーネントの背景色が緑、テキスト色が白になります。

---

4. ダイナミックなスタイル変更

スタイリングフックはJavaScriptを通じて動的に変更することもできます。

HTMLファイル

<lightning-button variant="brand" label="色を変更" class="dynamic-button" onclick={changeButtonColor}></lightning-button>

JSファイル

changeButtonColor() {
        const button = this.template.querySelector('.dynamic-button');
        button.style.setProperty('--slds-c-button-brand-color-background', '#ff5722'); // 背景色をオレンジに変更
    }

結果

「色を変更」ボタンをクリックすると、dynamic-button クラスのボタンの背景色がオレンジに変わります。

---

5. 利用可能なスタイリングフックの確認方法

LDSドキュメントには利用可能なスタイリングフックの一覧が記載されています。例えば、ボタンに関連する以下のフックが利用可能です。

--slds-c-button-brand-color-background: orange;
--slds-c-button-brand-color-border: orange;

詳細は lightningdesignsystem 公式ドキュメントを参照してください。

---

結論

スタイリングフックを活用することで、LDSの一貫性を保ちながらカスタマイズ性を向上させることができます。開発者はCSS変数を使用するだけで直感的にスタイルを変更できるため、作業効率の向上にも寄与します。ぜひプロジェクトに取り入れて、より魅力的なUIを構築してください！