Create custom styled widget components

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

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

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

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

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

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

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

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>
    )
};

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