react css imported in jsx module not applied-CodePudding

I import my css file like:

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

Use the style here:

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

The css for the button looks like:

.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 doesnt get applied to the button element. This happens to all styles. I have no more idea what the proplem could be.

Using inlined or "style" is no option for me here, sice the css will get a bunch more. Any idea how i could diagnose the problem here?

CodePudding user response：

The bug is in the css file the syntax is incorrect. You dont have to put quotes in he values. Try to replace 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;}