如何在Shadow DOM中使用@mui/material 5且不丢失样式？v5方案咨询

Material UI 5 已弃用 @mui/styles，转而基于 Emotion（默认）或 styled-components 作为样式引擎。要在 Shadow DOM 中正常使用且不丢失样式，核心是将样式注入的目标指向 Shadow DOM 根节点，而非全局 document。

方案1：使用 Emotion 缓存配置（默认样式引擎） #

MUI v5 默认依赖 Emotion，通过自定义 Emotion 缓存并指定注入容器为 Shadow DOM 根，即可实现样式正确隔离和渲染：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import Button from '@mui/material/Button';

// 创建并挂载Shadow DOM根
const shadowHost = document.createElement('div');
const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
document.body.appendChild(shadowHost);

// 创建指向Shadow根的Emotion缓存
const emotionCache = createCache({
  key: 'mui-shadow-dom',
  container: shadowRoot,
});

const theme = createTheme();

function ShadowMUIApp() {
  return (
    <CacheProvider value={emotionCache}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Button variant="contained" color="primary">
          正常渲染的Shadow DOM按钮
        </Button>
      </ThemeProvider>
    </CacheProvider>
  );
}

// 将应用挂载到Shadow DOM根
const root = ReactDOM.createRoot(shadowRoot);
root.render(<ShadowMUIApp />);

方案2：使用 styled-components 作为样式引擎 #

若项目使用 styled-components 替代 Emotion，需通过 StyleSheetManager 指定样式注入目标：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { StyleSheetManager } from 'styled-components';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import Button from '@mui/material/Button';

// 创建Shadow DOM根
const shadowHost = document.createElement('div');
const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
document.body.appendChild(shadowHost);

const theme = createTheme();

function ShadowMUIApp() {
  return (
    <StyleSheetManager target={shadowRoot}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Button variant="outlined" color="secondary">
          styled-components驱动的Shadow DOM组件
        </Button>
      </ThemeProvider>
    </StyleSheetManager>
  );
}

// 挂载到Shadow根
const root = ReactDOM.createRoot(shadowRoot);
root.render(<ShadowMUIApp />);

关键注意事项 #

• Shadow DOM 需设置为 open 模式，否则无法访问其内部节点进行样式注入
• CssBaseline 的全局样式会随缓存配置自动注入到 Shadow DOM，无需额外处理
• 避免在 Shadow DOM 外部编写影响内部的全局样式，Shadow DOM 本身的隔离特性会确保 MUI 样式仅作用于内部组件

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