Working with JS SDK and UI Components

Create and use a custom theme

Adding a theme to an application with CSS variables is the fastest way to style your components. You can use the default theme or a custom theme.

To create and use a custom theme:

In your React project, open your application component.
In the component, create a default theme object as shown in the following code block, and fix import statements.
import { createTheme } from '@sitecore-search/ui'; const myTheme = createTheme();

To create a custom theme, add CSS variables as shown in the following:

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

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

In your application component, in the return statement, to the div wrapper of WidgetsProvider, set the value to style as shown in following:
<div style={myTheme.style}> <WidgetsProvider>Nested content.</WidgetsProvider> </div>

If you have suggestions for improving this article, let us know!