如何在React自定义元素的Shadow DOM中为MUI v5创建样式挂载插入点

问题根因 #

MUI v5 默认使用 Emotion 作为样式引擎，默认会把所有生成的样式插入到页面的 document.head 中，而自定义元素的 Shadow DOM 是样式隔离的，head 中的样式无法作用到 Shadow DOM 内部，这就是你所有内置组件没有预设样式的核心原因。

你之前两种方案的问题：

• 第一种仅使用 StyledEngineProvider 没有指定 Emotion 样式的插入位置，样式还是写入了 document.head，被 Shadow DOM 隔离
• 第二种仅配置了 @mui/styles 的 JSS 插入点，但 MUI v5 内置组件的样式已经从 JSS 迁移到 Emotion，所以不生效

解决方案 #

步骤1：安装必要依赖 #

你需要额外安装 Emotion 相关依赖来配置自定义样式缓存：

npm install @emotion/cache @emotion/react
# 或者用yarn
yarn add @emotion/cache @emotion/react

步骤2：修改 index.tsx 配置 #

核心逻辑是创建自定义的 Emotion 缓存，指定样式插入到 Shadow DOM 内部的节点，再通过 CacheProvider 注入到应用中。如果你的项目还用到了旧的 @mui/styles 相关API（比如 makeStyles），可以同时保留 JSS 的配置，实现新旧样式兼容。

完整代码如下：

import AppComponent from './App';
import { render } from 'react-dom';
import { ThemeProvider, createTheme, StyledEngineProvider } from '@mui/material/styles';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
// 如果还用到@mui/styles的旧API，保留以下两个导入，否则可以去掉
import { StylesProvider, jssPreset } from '@mui/styles';
import { create } from 'jss';

const theme = createTheme();

class MyWebComponent extends HTMLElement {
    connectedCallback() {
        const shadowRoot = this.attachShadow({ mode: 'open' });
        // 创建样式插入点，Emotion和JSS的样式都会插入到这个节点前/内部
        const insertionPoint = document.createElement('style-insertion-point');
        shadowRoot.appendChild(insertionPoint);
        // 创建React挂载节点
        const mountPoint = document.createElement('div');
        shadowRoot.appendChild(mountPoint);

        // 配置Emotion缓存，指定样式插入到Shadow DOM中
        const cache = createCache({
            key: 'mui-shadow',
            container: shadowRoot,
            insertionPoint: insertionPoint,
        });

        // 如果不需要兼容@mui/styles的旧API，可以去掉以下JSS相关配置
        const jss = create({
            ...jssPreset(),
            insertionPoint: insertionPoint,
        });

        render(
            <CacheProvider value={cache}>
                <StyledEngineProvider injectFirst>
                    <ThemeProvider theme={theme}>
                        {/* 保留StylesProvider仅为兼容旧JSS样式，不需要可以去掉 */}
                        <StylesProvider jss={jss}>
                            <AppComponent />
                        </StylesProvider>
                    </ThemeProvider>
                </StyledEngineProvider>
            </CacheProvider>,
            mountPoint
        );
    }
}
customElements.define('my-element', MyWebComponent);

补充说明 #

• injectFirst 属性可以让 MUI 的内置样式优先级低于你自定义的样式，避免样式覆盖问题，可根据实际需求选择是否保留
• 如果你的项目已经完全移除了 v4 遗留的 makeStyles/useStyles 等 JSS 相关 API，可以直接删除 StylesProvider 相关的所有代码，仅保留 Emotion 配置即可
• 该方案完全兼容自定义元素的使用场景，打包后集成到其他宿主应用不会出现样式冲突问题

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