※ これから記載する事項は、私が所属する会社とは切関係のない事柄です。
今回は Salesforce の Platform と Experience Builder にてスタイルフックを利用してみたいと思います。
Platform
Platformsでは --slds で始まるHooksを利用します。詳細はヘルプを参考にしてください。
コンポーネントへのデザイン設定
コンポーネントへのデザインの設定方法を紹介します。
class での設定
こちらは通常通り CSS のセレクターとして class を指定して設定する方法です。
Lightning Design System の上書き
各コンポーネントに対応した Hooks に対して設定をしていきます。（Button コンポーネントの例 ）
ビルドイン Lightning Web Component の上書き
ビルトインされている Lightning Web Component も中身は Lightning Design System と同様のクラスが適用されています。
コンポーネントがどの Design System と対応しているか知りたい場合は、コンポーネントリファレンスページのコンポーネントの詳細ページに遷移し、「Document」タブをクリックします。（lightning-button の場合）
下にスクロールしていくと「Component Styling」セクションの中に Design System のヘルプページへのリンクがあります。
LWC の例（Platform）
下記のようなコンポーネントを作成した場合、
<template>
<!-- Lightning Design System のボタン -->
<button class="slds-button slds-button_brand">Submit</button>
<!-- ビルトイン Lightning Web Component のボタン -->
<lightning-button variant="brand" label="Brand"></lightning-button>
<!-- class を利用したデザインの設定 -->
<div class="sample">Sample Text</div>
</template>
/* ビルトイン Lightning Web Component, Lightning Design System ボタンへ適用される */
:host {
--slds-c-button-brand-color-background: purple;
--slds-c-button-brand-color-border: purple;
}
/* クラスを指定した設定 */
.sample {
color: var(--lwc-colorTextError);
}
下記のような見た目になります。
LWC の例（Platform）の説明
ブランドボタンのバックグラウンドとボーダーに対して紫色を設定するためにはまず、コンポーネントで利用している Hooks 名を確認する必要があります。下記は Button のページの例です。
また、.sample の設定で利用したように var を用いてあらかじめ宣言されている変数を使うことができますが、その際は Design Tokens のページへ遷移し、利用したい変数を確認し、先頭に --lwc を付け足すと利用可能です。
Experience Builder
Platforms では --dxp で始まる Hooks を利用します。もし--dxpで対応できないようなものがあった場合は --sds を利用することも可能です。詳細はヘルプを参考にしてください。
全ページに対する head タグでのテーマの上書き
全ページのテーマの上書きをする際は基本的にはテーマパネルを利用してもらうのがいいかと思いますが、Experience Builder 設定の Advanced > Edit Head Markup から head タグを修正してstyleを追加することが可能です。
コンポーネントへのデザイン設定
class での設定
こちらは通常通りCSSのセレクターとしてclassを指定して設定する方法です。
data-component-id での設定
全てのコンポーネントは data-component-id というプロパティを持っているので、そのプロパティを利用してCSSを適用することができます。（ヘルプ）
LWC の例（Experience Builder）
Experience Builder 設定の Advanced > Edit Head Markup にて下記の内容を head タグへ追記します。
<style>
[data-component-id="richTextEditor-63fe"] {
border: 2px dashed #000;
}
:root {
--dxp-g-brand: red;
}
</style>
下記のようなコンポーネントを作成した場合、
.class-sample {
border: 2px dashed var(--dxp-g-destructive-1);
}
<template>
<section>
<button class="slds-button slds-button_brand">Global Sample</button>
<button class="class-sample">Class Sample</button>
</section>
</template>
下記のような見た目になります。今回は「Sample Content」にはビルトインされている「Rich Content Editor」（data-component-id="richTextEditor-63fe"）を使用しています。
