---
title: "カスタムスタイルのウィジェットコンポーネントを作成する"
slug: "create-custom-styled-widget-components"
abstract: "カスタムスタイルのマーチャンダイジングウィジェットを使い、Sitecore Search JS SDKとUI ComponentsをReactに使います。"
---
# カスタムスタイルのウィジェットコンポーネントを作成する

Sitecore Search UI Componentsパッケージには、UIコンポーネント、プリミティブ、スタイルで構築されたスタイル付きウィジェットコンポーネントのテンプレートが含まれています。これらのコンポーネントのスタイルを編集したり、コンポーネント全体を置き換えたりできます。

カスタムスタイル付きのクエリフックrecommendationウィジェットコンポーネントを作成するには:

1.  UIコンポーネントの参考サイトのウィ **ジェットテンプレート** セクションで、**Search結果** ページを開きます。
    
2.  Reactプロジェクトのwidget\_componentsフォルダにsearchResultsBasicStoryという名前のフォルダを作成します。
    
3.  テンプレートのリストから、**Basic Story**ページのindex.jsをクリックしてコードブロックをコピーします。
    
4.  searchResultsBasicStoryフォルダにindex.jsというJavaScriptファイルを作成し、コピーしたコードブロックを貼り付けて保存します。
    
5.  テンプレートのリストから、**Basic Story**ページのstyled.jsをクリックしてコードブロックをコピーします。
    
6.  searchResultsBasicStoryフォルダにJavaScriptファイルを作成しstyled.js、コピーしたコードブロックを貼り付けて保存します。
    
7.  styled.jsでは、スタイル付きのプリミティブを編集し、セーブします。
    
8.  applicationコンポーネント内で、以下のコードブロックに示されたようにコンポーネントを追加します。
    
    imports ( SearchResultsBasicStory ) from "./widget\_components/searchResultsBasicStory";
    
    const MyApp = () => {
     return (
     <WidgetsProvider
     env='<environment>'
     customerKey='<customer key>'
     apiKey='<api key>'
     >
     <SearchResultsBasicStory rfkId="styled\_searchResultsBasicStory" />
     </WidgetsProvider>
     )
    };
    
9.  コンパイルエラーを避けるために、インポートセクションを更新して保存してください。
    

> !ヒント実装のためのReactリソース:
> 
> -   Discoverウィジェットの動作例を見るには、Search JS SDKおよびUIコンポーネントパッケージを使って作成された [スターターキットのウェブサイト](https://developers.sitecorecloud.io/search-sdk/react/website) をご覧ください。
>     
> -   GitHubリポジトリをダウンロードまたはフォーク[できます。](https://github.com/Sitecore/Sitecore-Search-JS-SDK-Starter-Kit/blob/main/README.md)
>     
> -   [Search Search UIコンポーネント参照](https://developers.sitecorecloud.io/search-sdk/react/latest/storybook/index.html)は、利用可能なすべてのウィジェットテンプレート、UIコンポーネント、テーマ変数を一覧にしています。
>     
> -   [UIコンポーネントCLI](https://www.npmjs.com/package/@sitecore-search/cli)を使ってIDEでウィジェットテンプレートを複製してください。
>