nextjs中的SCSS addclass

Question

我在 nextjs 项目中工作并使用 scss 模块过程进行样式

一个示例组件目录如下所示 SampleComponent -> index.tsx 和 SampleComponent.module.scss

SampleComponent.module.scss 中的代码

.box{
    // some css (say set1)
    &.disabled{
        // some other css (say set2)
    }
}

在 index.tsx 中

import styles from './SampleComponent.module.scss'


<div className={styles.box}></div>

我如何在这里添加残疾人班？

提前致谢

Answer 1

我认为您想将“box”和“disabled”类添加到您的 div 中。如果是这样，您可以为此目的使用模板文字

<div className={`${styles.box} ${styles.disabled}`}></div>

或者你可以添加两个类来制作一个字符串

let classes =  styles.box + ' ' + styles.disabled

然后

<div className={classes}></div>

Answer 2

你可以使用 classnames 包 https://www.npmjs.com/package/classnames

<div className={classNames(styles.box, styles.disabled)}></div>

或者你也可以这样使用它：

<div className={`${styles.box} ${styles.disabled}`}></div>