Styling
The searchstudio-ux-js library comes with a default CSS theme located at:
1 | node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/mainTheme.css |
To use the default styling, simply import this CSS file:
1 | @import 'node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/mainTheme.css' ; |
Customization
The default CSS classes can be overridden to customize the styling:
1 2 3 4 5 6 7 8 9 | .searchstax-search-input { /* Override default input styling */ } .searchstax-result { /* Override result styling */ } /* Override other CSS class names */ |
For more extensive customization, the SCSS source files can be imported and modified:
1 2 3 | @import 'node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/scss/mainTheme.scss' ; // Override SCSS variables and mixins |
See the source SCSS files for the various mixins, variables, and selectors that can be customized.
Theming
To create a new theme, the main SCSS file can be used as a starting point:
1 2 3 | @import 'mainTheme.scss' ; // Override variables and custom CSS |
This allows building on top of the default theme with new styling and theme variables.
Questions?
Do not hesitate to contact the SearchStax Support Desk.