react css imported in jsx module not applied

Question

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?

You need bundlers like webpack or rollup to make CSS imports work. Do you use them? — Vladislav Kibenko
– Vladislav Kibenko, Commented Dec 20, 2022 at 7:36
You need to have [email protected] and higher to use this feature i.e CSS Modules Stylesheet — Bilal Nasir
– Bilal Nasir, Commented Dec 20, 2022 at 7:41
@VladislavKibenko i run my app with npm start in debug. in release, i build it. tbh i dont know since my knownledge is limited still. — Ranndom
– Ranndom, Commented Dec 20, 2022 at 7:44
@BilalNasir package.json tells me i use react-scripts `6.3.0 — Ranndom
– Ranndom, Commented Dec 20, 2022 at 7:45
Could you console.log(styles) to make sure, webpack correctly imports this CSS? In case, it is not, check if you typed correct imported file name — Vladislav Kibenko
– Vladislav Kibenko, Commented Dec 20, 2022 at 7:47

Bilal Nasir · Accepted Answer · 2022-12-20 08:11:00Z

1

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;}

answered Dec 20, 2022 at 8:11

Bilal Nasir

2503 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ranndom Over a year ago

your point is correct. but it doesnt fix my problem. but i indeed now did fix my css.

Ranndom Over a year ago

in the end it was indeed the faulty css.. credits to you. my mistake why i didnt spot it right away, i removed the .module from the css filename.

Ranndom Over a year ago

also big credit to @Vladislav Kibenko he helped out a lot by deagnosing the proplem.

Collectives™ on Stack Overflow

react css imported in jsx module not applied

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related