React中hr标签自定义CSS类不生效，仅未定义divider类生效求助

1. 先确认元素实际的类名 #

打开浏览器开发者工具（F12），选中这个<hr>元素，查看Elements面板里的class列表：

• 如果发现元素上自动出现了divider类，说明是全局样式、第三方UI库（比如Bootstrap、MUI这类）或者项目里的其他组件/全局CSS给<hr>自动添加了这个类。
• 同时检查全局CSS文件（比如index.css、App.css）里有没有直接给<hr>标签写样式，或者用了*选择器覆盖了局部类的样式。

2. 检查CSS模块化配置 #

如果你的项目用了CSS Modules（比如CSS文件名是xxx.module.css），直接写className="borderLine"是不生效的，必须通过导入的样式对象引用：

// 导入CSS模块
import styles from './YourComponent.module.css';

// 在组件里使用
<hr className={styles.borderLine} />

如果是普通CSS文件（非模块化），确认你已经在组件顶部正确导入了这个CSS文件：

import './YourComponent.css';

3. 排查样式优先级问题 #

打开开发者工具的Styles面板，查看.borderLine的样式是否被划掉（表示被更高优先级的样式覆盖）：

• 如果是优先级问题，可以调整选择器权重，比如用hr.borderLine代替.borderLine，提高优先级：

hr.borderLine {
  margin: 2rem;
  width: 100%;
  color: white;
  border: 1px solid white;
}

• 也可以临时加!important测试（不推荐长期使用，仅用于排查）：

.borderLine {
  margin: 2rem;
  width: 100%;
  color: white;
  border: 1px solid white !important;
}

4. 检查第三方依赖或全局样式污染 #

如果项目里引入了第三方UI组件库，有些库会给原生HTML标签（比如<hr>）添加默认类名或全局样式，可能会干扰你的自定义类。可以尝试暂时注释掉第三方库的引入，看问题是否消失，以此确认是否是库的问题。

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