Searchstax-ux-react Styling for React and Next.js

The SearchStax Site Search solution’s SearchStudio-ux-react comes with default CSS styling that can be customized 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, simply import this file:

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

Customization

The default CSS classes can be overridden to customize styling:

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

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

/* Override other class names */

Advanced Customization

For more advanced customization, the SCSS source files can be imported and modified:

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

// Override SCSS variables and mixins

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

Theming

To create a new theme, the main SCSS file can be used as a base:

@import 'mainTheme.scss';

// Override variables and add custom CSS

This allows building on top of the default theme with new styling and variables.

Questions?

Do not hesitate to contact the SearchStax Support Desk.