nextjs 中的 SCSS addclass答案

【问题标题】：SCSS addclass in nextjsnextjs 中的 SCSS addclass
【发布时间】：2021-09-24 05:59:55
【问题描述】：

我在 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>

如何在此处添加禁用类？

提前致谢

【问题讨论】：

【解决方案1】：

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

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

或者您可以添加两个类以将单个字符串设置为

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

然后

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

【讨论】：

【解决方案2】：

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

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

或者你也可以这样使用：

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

【讨论】：