在JSX模块中导入的 react CSS没有应用

Question

导入css文件如下:

import styles from "./Documentation.module.css";

使用此处的样式:

<button
className={styles.button}
onClick={(e) => selectDoc(m.id)}
>
<b>{m.title}</b>
</button>

按钮的css样式如下:

.button {
color: "#d0e6a5";
background-color: "#5d684b";
border: "none";
border-left: "4px solid #d0e6a5";
font-size: "28px";
padding: "6px 12px";
margin: "3px";
width: "200px";
}

但是CSS没有应用到button元素。所有样式都会发生这种情况。我不知道是什么问题。

使用内联或"style"在这里我没有选择，因为CSS会得到更多。你知道我怎么诊断这个问题吗?

Answer 1

错误在css文件中，语法不正确。你不必在值中加上引号。尝试将其替换为以下css

.button {
color: #d0e6a5;
background-color: #5d684b;
border: none;
border-left: 4px solid #d0e6a5;
font-size: 28px;
padding: 6px 12px;
margin: 3px;
width: 200px;}