mui Select 使用入口点插入范围阴影 DOM 样式时未设置样式的下拉选项

Question

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

在最终弄清楚如何在使用情感入口点插入范围阴影 DOM 样式时显示 @mui/material 样式之后（请参阅此 post )，事实证明，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);
}

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

下拉选项显示如下：

Answer 1

您应该添加 MenuProps.disablePortal = true 以在阴影内安装菜单 DOM（以便能够使用范围样式）

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

mui Select 使用入口点插入范围阴影 DOM 样式时未设置样式的下拉选项

mui Select drop down options not styled when using entry point to insert scoped shadow DOM styles

reactjs

material-ui

custom-element

react-typescript