I am working on a tailwind + storybook component library where the theme colors change based on the class that is given to the html element.
Since components will have different colors in different themes, it would be great to have a theme toggle control in each story.
To achieve that, I was wondering if there is a way to add and remove a class to the html of each story preview with a control?
In order to get conditional classes on React you can use build the string for the className prop of your component like this:
render() {
let className = 'menu';
if (this.props.isActive) {
className += ' menu-active';
}
return <span className={className}>Menu</span>
}
Although it is recommended using the classNames utility in order to simplify this process like this:
render () {
var btnClass = classNames({
btn: true,
'btn-pressed': this.state.isPressed,
'btn-over': !this.state.isPressed && this.state.isHovered
});
return <button className={btnClass}>{this.props.label}</button>;
}
You can read more about this in the React docs or in the classNames docs.