具有 CSS 模块和 React 的多个类名

Posted 2023-02-21

【中文标题】具有 CSS 模块和 React 的多个类名

【英文标题】：Multiple classNames with CSS Modules and React

【发布时间】：2016-11-17 20:09:48

【问题描述】：

我正在使用以下代码根据 props 中的布尔值在 React 组件中动态设置类名：

<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 不适合你？它就是为这种情况而设计的。

我用classnames 做到了这一点：let classNames = classnames(styles.sideMenu, active: this.props.menuOpen, ); 但是，键active 必须是styles.active（这样我可以将我的css 放在导入的样式表中），并设置为产生错误。也许我误解了文档？

【参考方案1】：

import classNames from 'classnames/bind'.

那么你可以这样使用：let cx = classNames.bind(styles);

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。您可以在帮助中心找到更多关于如何写好答案的信息：***.com/help/how-to-answer。祝你好运?

【参考方案2】：

使用Array.join

<div className=[styles.sideMenu, this.props.menuOpen ? styles.show : styles.hide].join(' ')></div>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案3】：

我想添加一个更好的方式来使用classnames npm 的bind api。您可以将类名绑定到从 css 导入的样式对象，如下所示：

import classNames from 'classnames/bind';
import styles from './index.css';

let cx = classNames.bind(styles);

并像这样使用它：

cx("sideMenu", "active": isOpen)

sideMenu 和 active 位于样式对象中。

【参考方案4】：

在这里聚会有点晚了，但使用字符串模板对我有用 - 如果您愿意，也可以将三元运算符移出 const：

<div className=`$styles.sideMenu $this.props.menuOpen ? styles.inactive : styles.active`>
...
</div>

【讨论】：

对我来说很好。仅供参考：你最后错过了一个 。

【参考方案5】：

使用逻辑AND 代替三元运算符使其更加简洁，因为classnames 省略了一个虚假值。

<div className= classNames(styles.sideMenu, this.props.menuOpen && styles.active) ></div>

【参考方案6】：

使用classnames 和 es6：

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

使用classnames 和 es5：

var classNames = classnames(styles.sideMenu, this.props.menuOpen ? styles.active : '');

【讨论】：

啊..我无法弄清楚语法 - 太完美了，谢谢克里斯！

[styles.active]: this.props.menuOpen 的语法是什么？我在 es6 中找不到它

@FroDK 它们被称为计算属性名称。 developer.mozilla.org/en-US/docs/Web/javascript/Reference/…

【参考方案7】：

这是我能找到的最接近可行的解决方案：

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

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

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

但是，这很 hacky - 如果有人有任何想法，我很乐意看到更好的解决方案。

【参考方案8】：

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

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

【讨论】：

我摆弄了这个 - 但我不确定在这种情况下我看到目标是什么 - 我需要一个基于道具中的布尔值添加的类，以及来自 css 模块的类，并且两者都应该以styles.为前缀。