无需改动现有导入、替代styled-components createGlobalStyle的实现方案

核心思路是导出一个同名的无渲染React组件，内部实现静态全局样式的一次性注入，完全兼容现有调用逻辑，无需修改业务项目的任何代码。

实现步骤 #

1. 整理全局样式内容 #

你可以选择将样式抽为单独的.css文件，或者直接以字符串形式存放在组件文件中，避免额外的打包工具配置。
示例单独的global.css内容：

@font-face {
   font-family: 'Name';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url(https://fonts.gstatic.com/s/name/v12/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFU0U1Z4Y.woff2) format('woff2');
}

/* 其余所有全局样式 */

2. 实现同名GlobalStyle组件 #

替换原来createGlobalStyle所在文件的代码，导出同名组件：

普通客户端渲染场景

// 如果你用Vite可以直接用?raw导入css为字符串，webpack可配置raw-loader实现同样效果
import globalCssText from './global.css?raw';

// 标记位保证样式仅注入一次
let isStyleInjected = false;

const GlobalStyle = () => {
  // 兼容服务端渲染环境，避免node环境执行dom操作报错
  if (typeof window === 'undefined' || isStyleInjected) return null;

  const styleElement = document.createElement('style');
  styleElement.textContent = globalCssText;
  document.head.appendChild(styleElement);
  isStyleInjected = true;

  return null;
};

export default GlobalStyle;

SSR（如Next.js）兼容场景

用useEffect保证仅在客户端挂载时执行一次注入：

import { useEffect } from 'react';
import globalCssText from './global.css?raw';

let isStyleInjected = false;

const GlobalStyle = () => {
  useEffect(() => {
    if (isStyleInjected) return;
    const styleElement = document.createElement('style');
    styleElement.textContent = globalCssText;
    document.head.appendChild(styleElement);
    isStyleInjected = true;
  }, []);
  return null;
};

export default GlobalStyle;

无打包工具特殊配置的简化方案 #

如果不想配置raw-loader或者用?raw导入，可以直接把样式写为字符串变量，不需要单独的css文件：

import { useEffect } from 'react';

const globalCssText = `
@font-face {
   font-family: 'Name';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url(https://fonts.gstatic.com/s/name/v12/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFU0U1Z4Y.woff2) format('woff2');
}
/* 其余所有全局样式 */
`;

let isStyleInjected = false;

const GlobalStyle = () => {
  useEffect(() => {
    if (isStyleInjected) return;
    const styleElement = document.createElement('style');
    styleElement.textContent = globalCssText;
    document.head.appendChild(styleElement);
    isStyleInjected = true;
  }, []);
  return null;
};

export default GlobalStyle;

方案优势 #

• 完全兼容现有使用逻辑：所有业务项目的import GlobalStyle from @our-company/ui和<GlobalStyle />调用都不需要修改
• 样式仅全局注入一次，不会因为上层组件重渲染触发重复解析，彻底解决点击交互触发字体重载的问题
• 完全移除styled-components依赖，打包体积和运行时性能都更优

内容的提问来源于stack exchange，提问作者Toni Michel Caubet