Estoy trabajando en una biblioteca de componentes Tailwind + Storybook donde los colores del tema cambian según la clase que se le da al elemento html.
Dado que los componentes tendrán diferentes colores en diferentes temas, sería genial tener un control de cambio de tema en cada historia.
Para lograr eso, me preguntaba si hay una manera de agregar y eliminar una clase al html de cada vista previa de la historia con un control.
Para obtener clases condicionales en React, puede usar construir la cadena para el accesorio className de su componente de esta manera:
render() { let className = 'menu'; if (this.props.isActive) { className += ' menu-active'; } return <span className={className}>Menu</span> } Aunque se recomienda usar la utilidad classNames para simplificar este proceso así:
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>; }Puede leer más sobre esto en los documentos de React o en los documentos de classNames .