テーマとスタイル

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

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

Sitecore Search UI Components内のすべてのコンポーネント、プリミティブ、およびテンプレートは、一般的な業界の慣行に従ってテーマを設定できます。これらは、一般的に受け入れられているCSSプロパティまたは変数を使用して、静的な言語に動的な性質を追加します。

Search JS SDKは、実行時にスタイルに値を割り当てます。SASSのようなCSSプリプロセッサは必要ありません。CSS変数の値を変更することで、アプリケーションのルックアンドフィールを変更するのは非常に簡単です。

CSSテーマまたはスタイルを作成してウィジェットコンポーネントに適用する方法は複数あります。テーマはCSS変数を使用して作成され、ウィジェットコンポーネントのラッパーに割り当てることも、ウィジェットコンポーネントに直接割り当てることもできます。

CSSテーマは、コンポーネントの色、フォントサイズ、フォントファミリなどの値を指定します。テーマを使用すると、アプリケーションの一貫した外観を作成できます。テーマを使用すると、ビジネスやブランドの特定のニーズに合わせてデザインの側面をカスタマイズできます。

Searchでウィジェットコンポーネントのスタイルを設定するには、JS SDKウィジェットコンポーネントをラップするHTML要素のスタイルにテーマを割り当てます。コンポーネント内でスタイルをさらにカスタマイズするには、テーマオブジェクトのトークンまたは変数を編集します。

createTheme機能を使用してテーマを作成できます。これにより、デフォルトのテーマのハードコピーが返されます。これには、カスタマイズできるスタイルとテーマオブジェクトが含まれています。

createTheme関数は、次のオブジェクトを返します。

style- すべてのプロパティ名の先頭に--sdcが付いたテーマオブジェクト。すべてのプロパティは、デフォルトのテーマと同じ値を持ちます。
setStyle- HTML要素とスタイルオブジェクトを提供することで、任意のHTML要素にCSSを適用するために使用できる関数。
currentTheme- デフォルトのテーマとマージされたテーマオブジェクト。

デフォルトのテーマを追加する

次の手順は、createTheme関数を使用して既定のテーマをインスタンス化する方法を示しています。テーマはすべてデフォルト値で設定されます。

デフォルトのテーマをReactアプリケーションに追加するには:

Reactアプリケーションでデフォルトのテーマオブジェクトを使用するには、次のコードブロックをコピーして貼り付けます。
RequestResponse
```
import { createTheme } from '@sitecore-search/ui';

const defaultTheme = createTheme(); // defaultTheme.style - defaultTheme.setStyle - defaultTheme.currentTheme
```

カスタムテーマを追加する

次の手順では、createTheme関数を使用してデフォルトテーマを作成する方法について説明します。

次の手順では、createTheme関数にカスタムプロパティを指定してカスタムテーマを作成する方法を示します。

カスタムテーマをReactに追加するには:

要件に合わせて、次のコードブロックに示すように既定のテーマを更新します。

RequestResponse

const theme = {
  palette: {
    primary: {
      main: '#F00',
      light: '#EEECFB',
      dark: '#4A37D5',
      contrastText: '#fff',
    },
  }
}

Reactアプリケーションで、カスタムテーマオブジェクトを追加するには、次のコードブロックをコピーして貼り付けます。
RequestResponse
```
import { createTheme } from '@sitecore-search/ui';

const customTheme = createTheme( theme );
```
メモ

createTheme関数に指定されたオブジェクトに含まれていないすべての必須テーマプロパティは、既定のテーマ値を保持します。

HTMLでテーマを適用する

テーマオブジェクトをHTML要素に適用すると、そのHTML要素を含むすべてのJS SDKウィジェットコンポーネントは、テーマのすべてのCSS変数にアクセスできるようになります。

スタイルオブジェクトをdiv要素に割り当てるには:

スタイルオブジェクトを定義し、次のコードブロックに示すように割り当てます。

RequestResponse

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

const { style } = createTheme();
<div style={style}>
  <WidgetsProvider>Content nested in theme.</WidgetsProvider>
</div>

JavaScriptを使用してテーマを適用する

Javascriptを使用してスタイルオブジェクトをbody要素に割り当てるには:

スタイルオブジェクトを定義し、次のコードブロックに示すように割り当てます。

RequestResponse

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

const defaultTheme = createTheme();
const bodyElement = document.body;
defaultTheme.setStyle(bodyElement, defaultTheme.style);

CSS変数を使用したコンポーネントのスタイルの編集

テーマのCSS変数を使用してコンポーネントのスタイルを編集するには:

次のコードブロックに示すように、変数を使用してコンポーネントのスタイルを定義します。

RequestResponse

import styled from 'styled-components';
import { theme } from '@sitecore-search/ui';

const DivStyled = styled.div`
  background-color: ${theme.vars.palette.primary.main}; // var(--sdc-palette-primary-main)
  color: ${theme.vars.palette.primary.contrastText};
`;

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

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