材质 UI - 更改对话框容器

Question

是否可以将容器传递/更改为 Dialog、Popper 等材质 ui 组件？ (https://material-ui.com/api/dialog/) 他们在 document.body 上渲染弹出窗口

目的是能够在shadow dom中显示对话框

export default class MyWebComponent extends HTMLElement {
    constructor() {
        super();
        const shadowRoot = this.attachShadow({ mode: "open" });
        this.mountPoint = document.createElement("span");
        this.mountPoint.className = "inner-app";
        this.reactRoot = shadowRoot.appendChild(this.mountPoint);
    }

  connectedCallback() {
    const jss = create({
      ...jssPreset(),
      insertionPoint: this.reactRoot,
    });

    render(
      <StylesProvider jss={jss}>
        <SimpleDialogDemo />
      </StylesProvider>,
      this.mountPoint
    );
  }
}

customElements.define("my-web-commponent", MyWebComponent);

Answer 1

是的，Dialog 支持 Modal 的所有属性，包括 container 属性。 Popper 也有一个 container 属性。