如何在 React JS 中设置全局字体系列？

Question

我正在尝试为反应中的所有文本设置一个字体系列，如下所示：

index.css 文件：

:root {
    font-family: 'Vazir', sans-serif !important;
}

但它不适用，我必须应用font-family: 'Vazir', sans-serif;important; 到每个组件 css 文件。

如何对字体系列进行一次编码并将其应用于每个组件文本或如何设置适用于反应 js 中呈现的所有文本的全局字体系列样式？

Answer 1

您应该可以将字体系列添加到

body, html { 
  font-family: 'Vazir', sans-serif;
}

在 React 中执行此操作时需要注意以下几点：

• 您是否将 CSS 文件导入根组件？ <App/>
• 您是否在 webpack 配置中使用了 css-loader？
• 您是否在尝试使用之前设置您的@font-family？
• 或者您是否从 link="rel" 导入了您的字体？

Answer 2

如果要影响所有页面上所有文本的字体。 只需将:root替换为*即可。 * 选择器影响给定页面上的所有内容。

确保将您的 css 文件导入到您希望它生效的每个 React 页面中。