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

Posted 2023-03-24

【中文标题】mui 使用入口点插入范围阴影 DOM 样式时选择未设置样式的下拉选项

【英文标题】：mui Select drop down options not styled when using entry point to insert scoped shadow DOM styles

【发布时间】：2021-12-18 01:00:07

【问题描述】：

请注意，这是针对 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），结果发现 Select 下拉菜单的样式设置不正确对于包含 @mui/material 组件的 Demo 组件。

这里是堆栈闪电战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);

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

下拉选项显示如下：

【参考方案1】：

您应该添加 MenuProps.disablePortal = true 以将 Menu 挂载到 shadow DOM 中（以便能够使用作用域样式）

<Select MenuProps= disablePortal: true >

【讨论】：

成功了。我无法在 mui.com 文档中轻松找到有关此的信息。如果有人能指点我，我将不胜感激。

mui.com/api/portal/#propsmui.com/api/popper