JS SDKとUI Componentsの操作

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

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

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

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

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

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

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

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

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

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

この記事を改善するための提案がある場合は、お知らせください!