React - Styling (searchstax-ux-react)

Styling Options

SearchStax Site Search's SearchStudio-ux-react comes with default CSS styling that you can customize for your React or Next.js search page.

Using Default Styles

The default CSS stylesheet is located at:

node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/mainTheme.css

To use it, import this file:

@import 'node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/mainTheme.css';

Customization

You can override the default CSS classes to customize styling.

.searchstax-input {
  /* Override input styling */ 
}

.searchstax-result {
  /* Override result styling */
}

/* Override other class names */

Advanced Customization

For advanced customization, you can import and modify the SCSS source files:

@import 'node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/scss/mainTheme.scss';

// Override SCSS variables and mixins

Check the SCSS source for available variables, mixins, and selectors.

Theming

To create a new theme, use the main SCSS file as a base:

@import 'mainTheme.scss';

// Override variables and add custom CSS

You can build on top of the default theme with new styling and variables.