首页 文章

具有CSS模块和React的多个classNames

提问于
浏览 次
13

我正在使用以下代码根据来自props的布尔值在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模块启动）我我不确定如何处理这个问题 .

任何指导都非常感谢 .

reactjs css-modules

4 回答

  • 0

    使用classnames和es6：

    let classNames = classnames(styles.sideMenu, { [styles.active]: this.props.menuOpen });

    使用 classnames 和es5：

    var classNames = classnames(styles.sideMenu, this.props.menuOpen ? styles.active : '');
    回复于
  • 0

    虽然我不是CSS模块的专家，但我确实找到了这个文档：https://github.com/css-modules/css-modules/blob/master/docs/import-multiple-css-modules.md

    您似乎需要使用 Object.assign 将 active 和 sideMenu 的样式组合在一起

    回复于
  • 13

    这是我能找到最接近工作解决方案的地方：

    const isActive = this.props.menuOpen ? styles.inactive : styles.active;

    <div className={isActive + ' ' + styles.sideMenu}>

    这确实有效 - 两者都允许使用导入的样式表中的样式，并且仅在 this.props.menuOpen 为 true 时应用 .

    然而，它非常hacky - 如果有人有任何想法，我很乐意看到更好的解决方案 .

    回复于
  • 0

    使用逻辑 AND 而不是三元运算符使得它更加冗长，因为 classnames 省略了一个假值 .

    <div className={ classNames(styles.sideMenu, this.props.menuOpen && styles.active) }></div>
    回复于

相关问题