Im JSX-Modul importiertes React-CSS wird nicht angewendet

Question

Ich habe meine CSS-Datei so importiert:

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

Verwenden Sie die Stile von hier:

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

Das CSS für den

Button sieht so aus:

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

Aber das CSS wird nicht auf das Schaltflächenelement angewendet. Das passiert bei allen Stilen. Ich weiß nicht, was das Problem ist.

Hier ist die Verwendung von Inline oder „Stilen“ für mich keine Option, da das CSS dadurch komplizierter wird. Irgendeine Idee, wie man das Problem hier diagnostizieren kann?

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;}