Reactjs createreact应用程序项目中的CSS模块不是'；t工作不正常

我在一个由createreact应用程序引导的React应用程序中工作，CSS模块似乎不能正常工作。如果文件命名正确（例如

styles.module.CSS

），CSS模块就可以与CRA一起使用。如果可能的话，我希望避免弹出

React版本：16.13.1
react脚本版本：4.0.3（我使用了3.4.3并进行了升级，但没有帮助）

问题是：

我有两个组件：A和B。组件B是组件A的子组件，两个组件都定义了段落的样式。问题是，即使组件B的样式应该具有更高的特异性，组件a的样式也应用于组件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中段落的字体大小为3rem，但应为1rem

---

我在想我的项目不知怎么搞砸了。我能做些什么来重置CSS模块，使它们正常工作吗？

我认为你做得不对。css模块不是这样吗

.elementClass {
    ...
}

我是对的，你必须做到：

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

然后

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

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

从“../B/B”导入B；
从“/A.module.css”导入样式；
render（）{
组件A
}

.elementClass {
    ...
}

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

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

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