CSS modules in Create React App project aren't working properly

Question

I'm working in a React app that was bootstrapped with Create React App and the CSS modules don't seem to be working correctly. CSS modules work out of the box with CRA if files are named properly (e.g. styles.module.css). I would like to avoid ejecting if possible.

React version: 16.13.1
react-scripts version: 4.0.3 (I was using 3.4.3 and upgraded but that didn't help)

Here's the issue:

I have two components: A and B. Component B is a child of Component A and both components define styles for a paragraph. The problem is that even though Component B's styles should have a higher specificity, Component A's styles are applied to the paragraph in Component B.

// A.js
import B from '../B/B';
import styles from './A.module.css';

render() {
    <div className={styles.componentA}>
        <p>Component A</p>
        <B />
    </div>
}

// B.js
import styles from './B.module.css';

render() {
    <div className={styles.componentB}>
        <p>Component B</p>
    </div>
}

// A.module.css
.componentA p {
    font-size: 3rem;
}

// B.module.css
.componentB p {
    font-size: 1rem;
}

The font size of the paragraph in Component B is 3rem when it should be 1rem.

I'm thinking that my project just got messed up somehow. Is there anything I can do to reset CSS modules so they work properly?

Answer 1

I think you are doing this wrong. Isn't css modules sintaxe like that?

.elementClass {
    ...
}

I am right, you must do:

//A.module.css
.componentA_p {
    font-size: 3rem;
}

and then

import B from '../B/B';
import styles from './A.module.css';

render() {
    <div>
        <p className={styles.componentA_p}>Component A</p>
        <B />
    </div>
}