Create React App 项目中的 CSS 模块无法正常工作答案

【问题标题】：CSS modules in Create React App project aren't working properlyCreate React App 项目中的 CSS 模块无法正常工作
【发布时间】：2021-08-01 06:31:04
【问题描述】：

我正在使用 Create React App 引导的 React 应用程序，CSS 模块似乎无法正常工作。如果文件命名正确（例如styles.module.css），CSS 模块可以与 CRA 一起使用。如果可能，我想避免弹出。

反应版本：16.13.1
react-scripts 版本：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.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;
}

组件B中段落的字体大小是3rem，而应该是1rem。

我在想我的项目只是以某种方式搞砸了。我可以做些什么来重置 CSS 模块以使其正常工作？

【问题讨论】：

标签： reactjs css-modules react-css-modules

【解决方案1】：

我认为你做错了。 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>
}

【讨论】：