Ignite UI for Web Components のコンポーネント スタイルのカスタマイズ

Ignite UI for Web Components コンポーネントを使用すると、ユーザーは CSS 変数と CSS パーツを公開することで、スタイル シートのさまざまなパーツを変更できます。

CSS パーツ

このドキュメントの前のセクションで説明したとおり、色、シャドウ、タイポグラフィ、丸み、サイズ、間隔など、コンポーネントのテーマのさまざまなパーツをカスタマイズする方法とは別に、各コンポーネントの特定のパーツをターゲットにすることによってスタイル シートの特定のセクションを上書きすることもできます。すべてのコンポーネントは、コンポーネント用に内部的に定義された既存のスタイルを追加またはオーバーライドできるさまざまな CSS パーツを公開します。

コンポーネントが公開するパーツは、各コンポーネントの API ドキュメントで確認できます。それとも、選択したブラウザーの「インスペクター」インターフェイスを使用していつでも見つけることができます。 たとえば、アバターが公開しているパーツを見つけたい場合は、ブラウザーでコンポーネントを右クリックし、(Chrome の場合) [検証] をクリックします。これにより、Web インスペクターが開き、エレメント エクスプローラー タブにカスタム エレメント マークアップが表示されます。以下のスクリーンショットのようなものが表示されるはずです。

Avatar は、アバターのタイプに応じて、base、icon、image、initials の 4 つのパーツを公開することに気付くでしょう。これらのパーツを使用すると、スコープ内で定義されたスタイルを上書きできます。

したがって、イニシャルの色をパレットの原色に変更したい場合は、次のように base または initials の色プロパティを上書きできます:

igc-avatar::part(base) {
  color: var(--ig-primary-500);
}

同じアプローチを使用して、base パーツまたは他のコンポーネントの他のパーツのプロパティを変更または追加できます。

CSS 変数

別のアプローチは、コンポーネントのスタイリングのさまざまなパーツを担当する CSS 変数を変更することです。便利なことに、アバターは既存のパレットの変数を使用してイニシャルのスタイルを設定します。詳しく調べると、色変数が --ig-gray-800 であることがわかります。アバターのスコープでこの変数の値を変更すると、イニシャルの色も変更できます。

igc-avatar {
  --ig-gray-800: hsl(0, 0%, 62%);
}

--ig-gray-800 変数の値を書き換えると、color プロパティを明示的に上書きすることなく、前の例と同じことが行われます。このアプローチは機能しますが、色のプロパティを単独で調べると、色がどこから来ているのかを追跡するのが少し混乱する可能性があります。そのため、base パーツの color プロパティを上書きすることをお勧めします。

まとめ

CSS パーツと CSS 変数について学び、ドキュメントに記載されている他の方法と組み合わせることで、すべてのコンポーネントの外観を好みに合わせて調整できるようになります。

API リファレンス