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

Question

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

最终弄清楚如何在使用情感入口点插入作用域阴影 DOM 样式时显示 @mui/material 样式(请参阅这篇文章 How to create insertion point to mount styles in shadow dom for MUI material v5 in React custom 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以将Menu挂载在shadow DOM内(以便能够使用作用域样式)

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