如何在基于 const 的 css 模块中使用多个类？答案

【问题标题】：How do I use multiple classes in css module based on a const?如何在基于 const 的 css 模块中使用多个类？
【发布时间】：2023-03-07 23:10:01
【问题描述】：

目前我的 extraClassName const 从未被读取，我希望 css 模块遵循基于 if 语句的 extraClassName 的内容。不知道该怎么做。

render() {
    const { isFinish, isStart } = this.props;
    const extraClassName = isFinish
      ? "node-finish"
      : isStart
      ? "node-start"
      : "";

    return <div className={`node ${styles.extraClassName}`}></div>;
  }```

【问题讨论】：

标签： css reactjs react-css-modules

【解决方案1】：

我在四处寻找后找到了我的问题的解决方案。最后一种情况应该作为 styles.node 添加，因为状态无关紧要，而 extraClassName 的 const （现在应该重命名）应该包含我要编辑的类的 css 模块。感谢我得到的所有回复和帮助！

  render() {
    const { isFinish, isStart } = this.props;
    const extraClassName = isFinish
      ? styles.nodeFinish
      : isStart
      ? styles.nodeStart
      : "";

    return <div className={`${extraClassName} ${styles.node}`}></div>;
  }

【讨论】：

【解决方案2】：

extraClassName 只是本地范围内的一个变量，它似乎不在样式对象上。

所以你应该可以写：

return <div className={`node ${extraClassName}`}></div>;

它应该可以工作。

如果你做了很多这种条件类渲染，有一些有用的 npm 包，例如classnames (https://www.npmjs.com/package/classnames) 或clsx (https://www.npmjs.com/package/clsx)，这使得编写这些条件类有点更好。

示例

import clsx from 'clsx';

...

return <div className={clsx('node', {
  'node-finish': isFinish,
  'node-start': !isFinish &&isStart
})}></div>;

如果您对这么小的实用程序的 npm 包持谨慎态度，那么为自己编写一个类似的实用程序库也非常快速和容易。

【讨论】：

感谢您的快速回复！但我应该详细说明：我希望我的 div 遵循基于 extraClassName 的 css 模块样式。遵循您的代码，我意识到我的 CSS 模块中的样式没有任何效果。