如何使用styled-components覆盖全局样式的font-style与font-family

问题根源 #

你在定义Text组件的样式时，错误地给CSS属性值加了双引号。这会让styled-components把这些样式解析成HTML元素的自定义属性（也就是你看到的<p font-style="italic" font-family="Arial"...>），而非有效的CSS规则，自然无法覆盖全局设置的Montserrat字体和默认样式。

正确写法 #

直接去掉属性值的双引号即可：

const Text = styled.p`
  font-style: italic;
  font-family: Arial;
  // 要是遇到带空格的字体名称，比如"Times New Roman"，才需要加引号
  // font-family: "Times New Roman", serif;
`;

优先级补充（可选） #

如果后续还出现样式不生效的情况，大概率是全局样式优先级更高，可以试试这些方法：

• 给组件添加更具体的选择器结构
• 必要时使用!important（尽量少用，避免样式混乱）
• 借助styled-components的主题或嵌套特性提升样式优先级

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