nextjs 中的 SCSS addclass

Posted 2023-02-22

【中文标题】nextjs 中的 SCSS addclass

【英文标题】：SCSS addclass in nextjs

【发布时间】：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>

如何在此处添加禁用类？

提前致谢

【问题讨论】：

这能回答你的问题吗？ using css modules how do I define more than one style name

【参考方案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>