为什么 h1 标签在 react/nextjs 中呈现正常大小的文本？答案

【问题标题】：why h1 tag is rendering normal size text in react/nextjs?为什么 h1 标签在 react/nextjs 中呈现正常大小的文本？
【发布时间】：2021-09-22 04:40:29
【问题描述】：

在我的反应应用程序中，无论我放置 h1 标签它只是显示一个正常的字体。在检查时我发现我的文本呈现为 h1 但 h1 的样式是

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}

我也尝试在我的 global.css 中更改它

h1{
    font-size: large;
    font-weight: 900;
}

但它没有工作。那么如何将 h1 渲染为标题 1 文本和字体大小

【问题讨论】：

【解决方案1】：

h1{
    font-size: 80px;
    font-weight: 900;
}

&lt;h1&gt;Example&lt;/h1&gt;

【讨论】：

【解决方案2】：

这似乎是特异性的问题。您的 global.css 规则正在被更具体的规则覆盖。从现有信息来看，我不知道这些规则是什么或在哪里。

这将帮助您更好地理解：MDN CSS Specificity

【讨论】：

我没有在任何地方指定任何特定的样式。但是，我的应用程序包含在脉轮提供程序中。 h1 在我的应用程序的任何页面上的任何地方都不起作用......所以这表明它与任何页面上的任何特定样式都无关
@user82554 那么也许脉轮正在推翻 global.css。检查，<h1 style="font-size: large;font-weight:900;">...</h1> 工作吗？如果是，那是肯定的。在这种情况下，我建议您使用内联样式或 !important 关键字，或者查看文档以从该框架中解决它；-)
我也检查了脉轮，我从脉轮中拉出 h1 - 提供者它仍然无法正常工作。但是 global.css 中的 !important 确实有效。我仍然想知道为什么默认情况下它不起作用。