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

Question

我正在尝试使用 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>
    );
}

Answer 1

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

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

例如

function Footer( props) {
    return (
        <div className={styles.footer}>
            <div className={`${styles.description} ${styles.yellow}`}>
              <p>this site was created by me</p>
            </div>
        </div>
    );
}

使用 react-css-modules你可以使用普通的类名语法:

<div styleName='description yellow'>

然后您指定 allowMultiple: true对于多个类