Ignite UI for React のテーマ
Ignite UI for React には、Bootstrap、Material、Fluent、Indigo の 4 つの異なるテーマが付属しています。すべてのコンポーネント テーマはコンポーネントに組み込まれていますが、パレット、タイポグラフィ、およびその他のグローバル構成を機能させるには、グローバル スタイル ファイルが必要です。
テーマの読み込み
テーマを有効にするには、テーマ ファイルを読み込む必要があります。プロジェクトの構成に応じて、インポートまたはリンクすることができます。
バンドルされているすべてのテーマとそのパスの完全なリストは次のとおりです:
| 名前 | バリアント | 場所 |
|---|---|---|
| Bootstrap | ライト | igniteui-react-grids/grids/themes/light/bootstrap.css |
| Material | ライト | igniteui-react-grids/grids/themes/light/material.css |
| Fluent | ライト | igniteui-react-grids/grids/themes/light/fluent.css |
| Indigo | ライト | igniteui-react-grids/grids/themes/light/indigo.css |
| Bootstrap | ダーク | igniteui-react-grids/grids/themes/dark/bootstrap.css |
| Material | ダーク | igniteui-react-grids/grids/themes/dark/material.css |
| Fluent | ダーク | igniteui-react-grids/grids/themes/dark/fluent.css |
| Indigo | ダーク | igniteui-react-grids/grids/themes/dark/indigo.css |
Sass によるカスタマイズ
上記のテーマ ファイルはビルド済みの CSS であり、このセクションのトピックでは CSS 変数をオーバーライドしてカスタマイズします。パレット、タイポグラフィ、エレベーション、および構成を参照してください。この方法ではビルド構成は不要で、ほとんどのカスタマイズに対応できます。
一部の機能は、変数を通じてではなくコンパイル時に実行されるため、Sass からのみ利用できます。アクセシビリティトピックのコントラスト関数とチャート パレット関数が主な例です。これらを使用するには、igniteui-theming をインストールしてインポートします:
@use 'igniteui-theming' as *;
// Required for $material-type-scale, $indigo-type-scale, and similar preset variables
@use 'igniteui-theming/sass/typography/presets' as *;
// Required for $material-elevations and $indigo-elevations
@use 'igniteui-theming/sass/elevations/presets' as *;@use 'igniteui-theming' as *; が解決されない場合は、Sass コンパイラーのロード パスに node_modules が含まれていません。Vite では css.preprocessorOptions.scss.loadPaths を、Next.js では sassOptions.loadPaths を設定してください。
API リファレンス
configureTheme