storybook-addon-jss-theme
Installation
yarn add -D storybook-addon-jss-theme
Configure storybook
To get this addon in your story book you have to register the panel and add story decorator
Registering the panel
Add to .storybook/addons.js
;
Adding story decorator
addDecorator to .storybook/config.js
;; const themes = theme1 theme2;;
or
addDecorator to particular stories
; const themes = theme1 theme2; ;
Example
To run provided example execute following command, storybook will run on port 3000
yarn example
API
Theme object
Theme object must contain two fields
name
(string): This contains the theme name displayed in Themes panelvariables
(object): This object holds all theme variables
Example
const defaultTheme = name: 'DEFAULT' variables: backgroundColor: 'lightgrey' textColor: 'black' borderRadius: '30px' ;
withThemesProvider
withThemesProvider
decorator takes one required argument which is an array of themes (look above for shape of theme object)
and second (optional) which is a ThemeProvider component for custom theme providers created with JSS's createTheme function
withThemesProvider(themes[, ThemeProvider])