CODEWITHSUNDEEP
reactjsmaterial-ui
Valu3
Valu3

Reputation: 434

Material UI - Change Dialog Container

Is it possible to pass/change a container to material ui components like Dialog, Popper and so on? (https://material-ui.com/api/dialog/) They render the popup on document.body

The purpose is to be able to show the dialog from within a 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);

Upvotes: 2

Views: 956

Answers (1)

Ryan Cogswell
Ryan Cogswell

Reputation: 80986

Yes, Dialog supports all of the properties of Modal including the container prop. Popper also has a container prop.

Upvotes: 1

Related Questions