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

问题描述

我正在使用通过 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 模块以使其正常工作？

解决方法

我认为你这样做是错误的。 css modules 不是这样的吗？

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