Javascript 使用css模块如何定义多个样式名称

我试图使用css模块为一个元素使用多个类。我该怎么做

function Footer( props) {
    const { route } = props;
    return (
        <div className={styles.footer}>
            <div className={styles.description, styles.yellow}>
              <p>this site was created by me</p>
            </div>
            <div className={styles.description}>
              <p>copyright nz</p>
            </div>
        </div>
    );
}

函数页脚（道具）{
const{route}=props；
返回(
这个网站是我创建的

新西兰版权所有

);
}

您可以使用css模块添加多个类，如下所示：

className={`${styles.description} ${styles.yellow}`}

e、 g

函数页脚（道具）{
返回(
这个网站是我创建的

);
}

使用，您可以使用普通的类名语法：

---

并且为多个类指定

allowMultiple:true

为什么不定义具有多个样式的附加类？ 像

然后

<div class="descyellow">

---

您可以使用将与空格连接的数组。i、 e

<div className={[styles.App, styles.bold, styles['d-flex-c']].join(' ')}>

用法

---

对于className属性前面的合并类名，可以使用“clsx”， 使用这个软件包很容易

import clsx from 'clsx';
// Strings
clsx('foo', 'bar', 'baz'); // 'foo bar baz'

// Objects
clsx({ foo:true, bar:false, baz:true });// 'foo baz'

您可以从以下地址找到包裹：

---

我强烈建议使用该软件包。它非常轻量级（缩小了600字节），并且没有依赖性：

从“classnames”导入类名；
功能页脚（道具）{
...
}

它甚至还有一个额外的好处，即能够有条件地添加类名（例如，附加一个暗主题类），而不必连接字符串，这可能会意外地添加一个

未定义的

或

false

类：

---

您应该添加方括号，使类名成为数组，并删除“，”addjoin（）

function Footer( props) {
const { route } = props;
return (
    <div className={styles.footer}>
        <div className={ [styles.description, styles.yellow].join(' ') }>
          <p>this site was created by me</p>
        </div>
        <div className={styles.description}>
          <p>copyright nz</p>
        </div>
    </div>
);

函数页脚（道具）{
const{route}=props；
返回(
这个网站是我创建的

新西兰版权所有

);

}

作为对的补充，以下功能使其更易于使用：

const classes=（classNames:Array | string）：string=>classNames（（Array.isArray（classNames）？classNames:classNames.split（“”））.map（x=>style[x]）；

这样做的目的是获取一个数组或一个字符串（然后将其拆分为一个字符串数组），并返回一个最终的类名（范围限定到当前模块，因为它使用导入的

样式
对象）

您可以这样使用它：

<div className={classNames(styles.formControl, { [styles.hidden]: hidden })}>
</div>



或者，如果愿意，指定一个字符串（在使用许多类时很方便，例如使用TailwindCSS）：

安装类名包以将类名连接在一起

npm install classnames --save

解决方案：

import cx from 'classnames';

Function footer(props) {
 ...
 <div className={cx(styles.description, styles.yellow)}>
}

从“classnames”导入cx；
功能页脚（道具）{
...
}
如果您正在使用classnames包，并且希望有条件地应用样式，则需要使用带括号的动态属性键，如下所示：

<div className={classNames(styles.formControl, { [styles.hidden]: hidden })}>
</div>


css模块为我提供了一个很好的机会来分离css类，并且由于css加载程序中的散列，它们会自动唯一。你是对的，这个黄色类可能不是一个好的例子，因为我想我现在将使用一个变量列表传递颜色，我只是想知道你怎么做？你可以使用ES2015语法。这将是
${styles.class1}${styles.class2}
感谢@Golinmarq更新，现在似乎在react-create应用程序的最新版本中它不再工作了，它会触发：“不允许重复道具”请，你能具体地说，我们应该在哪里添加
allowMultiple:true
？我找不到任何与你有关的东西it@NorayrGhukasyan
导出默认CSSModules（页脚、样式，{allowMultiple:true}）
检查警告：“避免使用多个CSS模块来描述单个元素。”太棒了。非常感谢。为什么不按照svnm的建议，只使用className={
${styles.description}${styles.yellow}
}？@VladyslavGoloshchapov“因为添加和删除类更容易，而不必每次都用
${/code>包装它们”。
import clsx from 'clsx';
// Strings
clsx('foo', 'bar', 'baz'); // 'foo bar baz'

// Objects
clsx({ foo:true, bar:false, baz:true });// 'foo baz'

function Footer( props) {
const { route } = props;
return (
    <div className={styles.footer}>
        <div className={ [styles.description, styles.yellow].join(' ') }>
          <p>this site was created by me</p>
        </div>
        <div className={styles.description}>
          <p>copyright nz</p>
        </div>
    </div>
);

npm install classnames --save

import cx from 'classnames';

Function footer(props) {
 ...
 <div className={cx(styles.description, styles.yellow)}>
}

<div className={classNames(styles.formControl, { [styles.hidden]: hidden })}>
</div>