React/Next.js中h1标签渲染为普通字号该如何解决

数据老陈

2026-10-3

问题原因

你看到的标题样式重置是CSS重置/归一化方案的默认行为，常见于Tailwind CSS Preflight、Normalize.css等框架自带的样式规则，目的是消除不同浏览器默认样式的差异。你写的全局样式未生效基本是优先级不足或者引入顺序错误导致的，可按以下步骤排查解决：

第一步：确认全局样式引入路径与顺序
Next.js 13+ App Router 必须在根app/layout.js/tsx中引入global.css，Pages Router 必须在pages/_app.js/tsx中引入全局样式。且要保证global.css的引入顺序在所有第三方CSS（比如组件库CSS、Tailwind入口指令）之后，避免被后续样式覆盖。
第二步：提升样式优先级（针对使用Tailwind的场景）
如果你用了Tailwind CSS，不要直接在全局CSS里写h1样式，要把样式放到@layer base中，确保优先级高于默认的Preflight重置规则：
```
/* global.css 尾部新增 */
@layer base {
  h1 {
    font-size: 2rem;
    font-weight: 900;
  }
  h2 {
    font-size: 1.5rem;
    font-weight: 700;
  }
  /* 按需配置其他标题样式 */
}
```
第三步：通用优先级调整（非Tailwind场景）
如果没有使用Tailwind，可以用更具体的选择器提高优先级，也可以临时加!important验证问题根源：
```
/* 选择器更具体，优先级高于默认的标签选择器重置规则 */
html body h1 {
  font-size: 2rem;
  font-weight: 900;
}
```
第四步：验证效果
打开浏览器开发者工具元素面板，找到h1标签的样式栏，查看你写的h1样式是否已经生效、有没有被划掉。如果还是被覆盖，可以找到生效的重置样式对应的来源文件，针对性调整你自定义样式的引入顺序或优先级。