カスタムテーマを作成して使用する

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

CSS変数を使用してアプリケーションにテーマを追加するのは、コンポーネントのスタイルを設定する最も速い方法です。デフォルトのテーマまたはカスタムテーマを使用できます。

カスタムテーマを作成して使用するには:

Reactプロジェクトで、applicationコンポーネントを開きます。
コンポーネントで、次のコードブロックに示すようにデフォルトのテーマオブジェクトを作成し、インポートステートメントを修正します。
RequestResponse
```
import { createTheme } from '@sitecore-search/ui'; 

const myTheme = createTheme();
```

カスタムテーマを作成するには、次に示すようにCSS変数を追加します。

RequestResponse

import { createTheme } from '@sitecore-search/ui'

const myTheme = createTheme({
  palette: {
    primary: {
      main: '#F00',
      light: '#EEECFB',
      dark: '#4A37D5',
      contrastText: '#fff',
    },
  }
});

applicationコンポーネントのreturnステートメントで、WidgetsProviderのdivラッパーに、次に示すように値をstyleに設定します。
RequestResponse
```
<div style={myTheme.style}>
  <WidgetsProvider>Nested content.</WidgetsProvider>
</div>
```

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、