TypeScript开发React应用时如何正确配置生效的全局字体

TS版React项目全局字体样式配置方案 #

问题核心原因 #

React本身对JS/TS的语法区分不会影响CSS加载逻辑，你之前的样式不生效，本质是没有在TS项目的入口文件中正确引入全局CSS文件，和是否使用TypeScript无关。

具体配置步骤 #

方案1：普通全局CSS文件引入（通用方案）

• 在src目录下新建全局样式文件，比如命名为global.css，写入你的样式规则：

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

• 找到TS版React的入口文件，通常为CRA创建项目的src/index.tsx，或Vite创建项目的src/main.tsx，在文件顶部主动引入全局CSS：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
// 关键：引入全局样式文件
import './global.css';

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

reportWebVitals();

注意：不要给全局CSS文件添加.module.css后缀，否则会被识别为模块化CSS，样式名会被哈希处理，无法全局生效。

方案2：CSS-in-JS场景配置（如果你使用styled-components/Emotion等方案）

以styled-components为例，使用框架提供的全局样式API实现：

• 新建全局样式文件src/globalStyles.ts：

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'PT Sans', sans-serif;
  }
`;
export default GlobalStyle;

• 在根组件App.tsx中挂载全局样式：

import GlobalStyle from './globalStyles';

function App() {
  return (
    <>
      <GlobalStyle />
      {/* 其余业务组件代码 */}
    </>
  );
}

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