React CSS importé dans le module jsx n'est pas appliqué

Question

J'ai importé mon fichier CSS comme ceci :

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

Utilisez les styles d'ici :

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

Le CSS du bouton

ressemble à ceci :

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

Mais le CSS ne sera pas appliqué à l'élément bouton. Cela arrive avec tous les styles. Je ne sais pas quel est le problème.

Ici, utiliser des styles en ligne ou "styles" n'est pas une option pour moi car le CSS deviendra plus compliqué. Avez-vous une idée sur la façon de diagnostiquer le problème ici ?

Answer 1

L'erreur existe dans le fichier CSS et la syntaxe est incorrecte. Vous n'êtes pas obligé de mettre des guillemets autour de sa valeur. Essayez de le remplacer par le CSS ci-dessous

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