React CSS imported in jsx module is not applied

Question

I import my css file like this:

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

Use styles from here:

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

The CSS for the button looks like this:

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

But the css will not be applied to the button element. This happens with all styles. I don't know what the problem is.

Here, using inline or "style" is no option for me because the css will become more. Any idea how to diagnose the problem here?

Answer 1

This error exists in the css file and the syntax is incorrect. You don't have to put quotes around his value. Try replacing it with the following css

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