使用 NextJS 模块 CSS 样式表中的样式答案

【问题标题】：Using style from a NextJS module CSS stylesheet使用 NextJS 模块 CSS 样式表中的样式
【发布时间】：2021-02-02 19:24:54
【问题描述】：

我有一个位于styles/Button.module.css 的按钮样式表，我正尝试在我的 NextJS 项目中使用它，但似乎无法启动。

在我的组件中，我已经正常导入了样式表，即；

import Button from '../styles/Button.module.css';

然后我尝试将它添加到组件中的返回中，就像这样；

<button onClick={e => login(e)} className={"text-white bg-indigo-600 " + (loading ? "Button.btn-loading" : "")}>
    Login
</button>

但样式似乎没有通过。

任何帮助将不胜感激

【问题讨论】：

【解决方案1】：

“Button.btn-loading”无效。 Button 是一个导入的 JS 对象，因此您需要删除引号来评估 JS 对象表示法。

<button onClick={e => login(e)} className={"text-white bg-indigo-600 " + (loading ? Button['btn-loading'] : "")}>
    Login
</button>

这就是 CSS Modules 推荐使用 camelCase 类名的原因，这样我们就可以使用点表示法而不是括号表示法来获取值。

我建议使用模板文字以获得更简洁的语法

<button onClick={e => login(e)} className={`text-white bg-indigo-600 ${loading ? Button['btn-loading']: ""}`}>
    Login
</button>

【讨论】：