浏览器环境下TypeScript React项目提取MUI组件静态HTML与CSS的方法

核心思路 #

@emotion/server是为Node.js SSR场景设计的，依赖浏览器不存在的Buffer/stream模块，没必要硬套。直接利用Emotion客户端缓存+浏览器原生DOM API就能完成提取，同时完美适配MUI的Theme机制。

方案一：真实DOM渲染提取（推荐，适配所有MUI样式） #

通过隐藏DOM容器渲染组件，确保Theme、动态样式（如依赖DOM尺寸的样式）完全生效，再提取HTML和CSS：

import { createCache, CacheProvider } from '@emotion/react';
import { render, unmountComponentAtNode } from 'react-dom';
import ExtractedComponent from './ExtractedComponent';
import { ThemeProvider, createTheme, StyledEngineProvider } from '@mui/material/styles';

// 1. 初始化Emotion缓存和MUI主题
const cache = createCache({ key: 'mui' });
const theme = createTheme(); // 替换成你的自定义主题

// 2. 创建隐藏DOM容器
const container = document.createElement('div');
container.style.display = 'none';
document.body.appendChild(container);

try {
  // 3. 渲染组件到容器
  render(
    <StyledEngineProvider injectFirst>
      <CacheProvider value={cache}>
        <ThemeProvider theme={theme}>
          <ExtractedComponent />
        </ThemeProvider>
      </CacheProvider>
    </StyledEngineProvider>,
    container
  );

  // 4. 提取HTML和CSS
  const html = container.innerHTML;
  const css = Array.from(cache.inserted.values()).join('\n');

  // 处理提取结果（如保存、下载）
  console.log('提取的HTML:', html);
  console.log('提取的CSS:', css);
} finally {
  // 5. 清理DOM，避免内存泄漏
  unmountComponentAtNode(container);
  document.body.removeChild(container);
}

方案二：脱离DOM渲染提取（适合无动态依赖的组件） #

如果组件不依赖真实DOM环境（无尺寸、滚动相关的动态样式），可以用react-dom/server的renderToString，配合Emotion缓存提取样式：

import { renderToString } from 'react-dom/server';
import { createCache, CacheProvider } from '@emotion/react';
import ExtractedComponent from './ExtractedComponent';
import { ThemeProvider, createTheme, StyledEngineProvider } from '@mui/material/styles';

const cache = createCache({ key: 'mui' });
const theme = createTheme();

// 渲染组件为字符串
const componentHtml = renderToString(
  <StyledEngineProvider injectFirst>
    <CacheProvider value={cache}>
      <ThemeProvider theme={theme}>
        <ExtractedComponent />
      </ThemeProvider>
    </CacheProvider>
  </StyledEngineProvider>
);

// 从Emotion缓存提取所有样式
const css = Array.from(cache.inserted.values()).join('\n');

// 输出结果
console.log('HTML:', componentHtml);
console.log('CSS:', css);

关键说明 #

1. Emotion缓存的作用：cache.inserted是Emotion维护的Map，存储了所有动态注入的样式字符串，直接提取即可，无需额外解析。
2. Theme适配：必须将组件包裹在ThemeProvider和CacheProvider中，确保MUI样式正确生成。
3. 异步组件处理：如果组件包含异步加载内容，需等待异步完成后再执行提取逻辑（比如用useEffect监听加载状态，或封装成Promise）。

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