请注意，这是针对 MUI v5 @mui/material 而不是使用 v4 @material-ui/core

在最终弄清楚如何在使用情感入口点插入作用域阴影 DOM 样式时如何使 @mui/material 样式显示之后（请参阅这篇文章如何在 React 自定义元素中为 MUI 材料 v5 创建插入点以在 shadow dom 中安装样式） ，事实证明 Select 下拉列表没有为包含 @mui/material 组件的 Demo 组件正确设置样式。

这是 stackblitz https://stackblitz.com/edit/react-d8xtdu-s2cufr?file=demo.js

import React from 'react';
import Demo from './demo';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { StylesProvider, jssPreset } from '@mui/styles';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
import { create } from 'jss';
import { render } from 'react-dom';

const theme = createTheme();

class MyWebComponent extends HTMLElement {
  connectedCallback() {
    const shadowRoot = this.attachShadow({ mode: 'open' });
    const emotionRoot = document.createElement('style');
    const mountPoint = document.createElement('div');
    shadowRoot.appendChild(emotionRoot);
    const reactRoot = shadowRoot.appendChild(mountPoint);

    const jss = create({
      ...jssPreset(),
      insertionPoint: reactRoot,
    });

    const cache = createCache({
      key: 'css',
      prepend: true,
      container: emotionRoot,
    });

    render(
      <StylesProvider jss={jss}>
        <CacheProvider value={cache}>
          <ThemeProvider theme={theme}>
            <Demo />
          </ThemeProvider>
        </CacheProvider>
      </StylesProvider>,
      mountPoint
    );
  }
}
if (!customElements.get('my-element')) {
  customElements.define('my-element', MyWebComponent);
}

而不是这样显示（此外点击事件没有被正确捕获，特别是不能点击选择框箭头来关闭它）：

下拉选项显示如下：