React CSS imported in jsx module is not applied
P粉063862561
P粉063862561 2024-04-03 18:41:07
0
1
501

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?

P粉063862561
P粉063862561

reply all(1)
P粉648469285

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;}
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template