mui 使用入口点插入作用域影子 DOM 样式时选择未设置样式的下拉选项

Question

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

最终弄清楚如何在使用情感入口点插入作用域阴影 DOM 样式时显示 @mui/material 样式（请参阅这篇文章如何创建插入点以在 React 自定义中的 MUI Material v5 的阴影 dom 中安装样式element），事实证明，对于包含 @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);
}

而不是像这样显示（此外，单击事件未正确捕获，特别是无法单击选择框箭头将其关闭）：

下拉选项显示如下：

Answer 1

您应该添加

MenuProps.disablePortal = true

将菜单挂载到 Shadow DOM 中（以便能够使用作用域样式）

<Select MenuProps={{ disablePortal: true }}>

Answer 2

我们可以使用

MenuProps.disablePortal = true

强制菜单显示在shadow DOM内部。但是，此设置会阻止选择菜单在模态中正确显示，因为模态可能与菜单重叠，导致菜单被切断。在 MUI v6 中，有一个

container

属性允许我们指定应安装选择菜单的根元素。

const getMyShadowDomRoot = () => {
  const shadowRoot = document.querySelector('#app')?.shadowRoot.
  if (shadowRoot) {
    return shadowRoot.querySelector('#myShadowRootApp');
  }
  return document.body;
}

<Select MenuProps={{ container: getMyShadowDomRoot() }}>

这里是 MUI 文档的链接：https://mui.com/material-ui/api/popover/#popover-prop-container