NextJs CSS module kebab-case with className not class-name

【问题标题】：NextJs CSS module kebab-case with className not class-nameNextJs CSS module kebab-case with className not class-name
【发布时间】：2022-10-14 23:06:00
【问题描述】：

我将 CSS 模块 (.scss) 与 NextJs 一起使用，并且有一个烤肉串命名约定。换句话说，是这样的：

.member-btn {
    background: #fff;
}

我面临的问题是，为了将它与className 一起使用，我必须像styles["member-btn"] 一样使用它。例如。

<Button className={styles["member-btn"]}>
    Hello world
</Button>

但是，我想将它与styles.memberBtn 一起使用并像对象一样使用它（IDE 也为此提供了内置支持）。例如。

<Button className={styles.memberBtn}>Hello world</Button>

这在 NextJs 中可能吗？

【问题讨论】：

标签： reactjs sass next.js next css-modules

【解决方案1】：

如果你想在不重写的情况下使用 css 类名，你可以在你的 "_app.tsx“ （或者 ”_app.js" 如果您不在 typescript 中），例如全局模块（请参阅How to apply global styles with CSS modules in a react app?）。然后你可以写：

<Button className={"member-btn"}>Hello world</Button>

【讨论】：

谢谢，但我不妨使用styles["member-btn"]... 重点是使用memberBtn，而不是member-btn 的一些变体
抱歉，我错过了您的观点，我认为您必须使用带有烤肉串案例的外部 CSS 库。对于 SCSS 模块，由于类名像 JS 变量一样被解析，我认为否则不可能。也许您可以在 CSS 模块中将“-”替换为“_”，并使用“styles.member_button”之类的内容。