Create custom styled widget components

Sitecore Search UI Components package includes templates of styled widget components that are widget components built with UI components primitives and styles. You can edit the styles in these components or replace entire components.

To create a custom styled query hooked recommendation widget component:

1. In the UI components reference site, in the Widget templates section, open the Search results page.

2. In your React project, in the widget_components folder, create a folder named searchResultsBasicStory.

3. From the list of templates, in the Basic story page, click index.js to copy the code block.

4. In the searchResultsBasicStory folder, create a JavaScript file called index.js, then paste the copied code block into it, and save.

5. From the list of templates, in the Basic story page, click styled.js to copy the code block.

6. In the searchResultsBasicStory folder, create a JavaScript file, styled.js then paste the copied code block into it, and save.

7. In styled.js, edit the styled primitives, and save.

8. In your application component, add component as shown in the following code block.

   imports ( SearchResultsBasicStory ) from "./widget_components/searchResultsBasicStory";
   
   const MyApp = () => {
       return (
           <WidgetsProvider
                   env='<environment>'
                   customerKey='<customer key>'
                   apiKey='<api key>'
               >
               <SearchResultsBasicStory rfkId="styled_searchResultsBasicStory" />
           </WidgetsProvider>
       )
   };

9. To avoid compile errors, update the imports section, and save.