React组件中不同H1标题颜色一致问题求助

嘿，我来帮你搞定这个样式冲突的问题！你遇到的核心问题是虽然用了.module.css命名，但没有正确使用CSS Modules的局部作用域语法，导致标签选择器h1还是全局生效，最后加载的样式覆盖了前面的。

错误原因分析 #

CSS Modules的局部作用域只针对类选择器、ID选择器生效，对标签选择器（比如h1）不会做哈希处理。所以你写的两个h1 { color: ... }本质上还是全局样式，当两个CSS文件都加载后，后加载的样式会覆盖先加载的，导致两个组件的H1都是同一个颜色。

正确的实现步骤 #

1. 修改CSS模块文件，使用类选择器

• ComponentOne.module.css：

.componentOneTitle {
  color: red;
}

• ComponentTwo.module.css：

.componentTwoTitle {
  color: blue;
}

2. 在组件中通过导入的样式对象引用类名

• ComponentOne.component.js：

import React from "react";
// 导入CSS模块为一个样式对象
import styles from "./ComponentOne.module.css";

export default function ComponentOne() {
  return <h1 className={styles.componentOneTitle}>组件一的标题</h1>;
}

• ComponentTwo.component.js：

import React from "react";
import styles from "./ComponentTwo.module.css";

export default function ComponentTwo() {
  return <h1 className={styles.componentTwoTitle}>组件二的标题</h1>;
}

原理说明 #

当你使用import styles from "./xxx.module.css"时，CSS Modules会把类名转换成唯一的哈希值（比如componentOneTitle变成ComponentOne_componentOneTitle_abc123），这样每个组件的类名都是唯一的，不会产生全局样式冲突，自然就能分别显示红色和蓝色了。

内容的提问来源于stack exchange，提问作者Frankie