我使用以下代码根据 props 中的 bool 值在 React 组件中动态设置 className:
<div className={this.props.menuOpen ? 'inactive' : 'active'}>
...
</div>
但是,我也使用 CSS 模块,所以现在我需要将 className 设置为:
import styles from './styles.css';
<div className={styles.sideMenu}>
...
</div>
我遇到了问题 - 我尝试使用 classnames获得对多个类的更多控制,但因为我需要最终结果是将 className 设置为 styles.sideMenu
AND styles.active
(为了启动 CSS 模块)我不确定如何处理这个问题。
非常感谢任何指导。
最佳答案
使用classnames和 ES6:
let classNames = classnames(styles.sideMenu, { [styles.active]: this.props.menuOpen });
使用类名
和es5:
var classNames = classnames(styles.sideMenu, this.props.menuOpen ? styles.active : '');
关于css - 具有 CSS 模块和 React 的多个类名,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38382153/