使用类型脚本在 React 应用程序中应用全局字体

Question

我使用这个配置将全局css配置应用到基于JavaScript的React项目中:

css文件：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'PT Sans', sans-serif;
}

阿普泰克斯

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

但是没有应用例如字体样式。你知道基于TypeScript的React项目合适的配置是什么吗？

Answer 1

这里可能缺少一个导入语句，用于将定义css的文件导入App.tsx。

尝试将以下导入语句添加到App.tsx顶部，以将样式应用于整个应用程序：

// App.tsx
import './yourStyle.css'

注意:您的导入应该指向相对于< code>App.tsx的样式表路径。

请看这里的例子

此外，您应该确保您要使用的字体“PT Sans”在您的项目中可用，因为默认情况下可能不支持它。

为此，请按照此处的步骤操作。

Answer 2

原因是因为特异性

inline id class tag *
    0    0     0     0   1

您的样式的特异性为 1，如果 body 或任何其他标签指定了它将覆盖您的字体系列

inline id class tag *
    0    0     0     1   0

字体系列样式是继承的样式之一，如果您希望您的文档具有特定的字体系列，则需要将它们添加到body或html标签中

body {
font-family: yow-font;
}

如果pt sans不是安全字体之一，则需要在html页面添加其url

Answer 3

大多数react项目都有index.scss或index.css文件。您可以在root或src目录中找到它。

我想你可以用这个文件。