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 ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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;}