React CSS yang diimport dalam modul jsx tidak digunakan

Question

Saya mengimport fail css saya seperti ini:

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

Gunakan gaya dari sini:

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

CSS untuk butang

kelihatan seperti ini:

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

Tetapi css tidak akan digunakan pada elemen butang. Ini berlaku dengan semua gaya. Saya tidak tahu apa masalahnya.

Di sini, menggunakan sebaris atau "gaya" bukan pilihan untuk saya kerana css akan menjadi lebih rumit. Sebarang idea bagaimana untuk mendiagnosis masalah di sini?

Answer 1

Ralat wujud dalam fail css dan sintaksnya tidak betul. Anda tidak perlu meletakkan petikan di sekitar nilainya. Cuba gantikan dengan css di bawah

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