请注意,这是针对 MUI v5 @mui/material 且NOT使用 v4 @material-ui/core
最终弄清楚如何在使用情感入口点插入作用域阴影 DOM 样式时显示 @mui/material 样式(请参阅这篇文章如何在React自定义元素中为MUI材质v5创建插入点以在shadow dom中安装样式 https://stackoverflow.com/questions/69813276/how-to-create-insertion-point-to-mount-styles-in-shadow-dom-for-mui-material-v5/69813517#69813517),事实证明,对于包含 @mui/material 组件的 Demo 组件,选择下拉列表的样式不正确。
这是堆栈闪电战https://stackblitz.com/edit/react-d8xtdu-s2cufr?file=demo.js 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);
}
而不是像这样显示(此外,单击事件未正确捕获,特别是无法单击选择框箭头将其关闭):
下拉选项显示如下: