Bug whit Material UI date picker

[SimonJiTa]

[SimonJiTa]

[PrimaMateria]

Probably you need in DialogProps set container property and pass there a reference to some element that is rendered in your web component. This happens because all the MUI styles are added under the shadowRoot where the webcomponent lives. But MUI by default injects Modals to the parent document. So with the container prop you instruct MUI to inject the Modal to correct place.

[SimonJiTa]

Probably you need in DialogProps set container property and pass there a reference to some element that is rendered in your web component. This happens because all the MUI styles are added under the shadowRoot where the webcomponent lives. But MUI by default injects Modals to the parent document. So with the container prop you instruct MUI to inject the Modal to correct place.

How i do that?

[PrimaMateria]

Hard to tell why exactly this doesn't work for you.
I don't use RootRef just a normal Box and I pass ref function instead of directly ref. And this ref I store in state, so I have a rerender when it becomes defined.

(Pseudocode with TS)

const [rootContainer, setRootContainer] = useState<HTMLDivElement | undefined>()
return (
  <>
    <Box ref={(ref) => setRootContainer((ref as HTMLDivElement) || undefined)}>
      /* The dialog must be inserted here */
    </Box>
    <Dialog container={rootContainer} />
  </>
);

Additionally, I passed the rootContainer to a React context, so then later anywhere down the component hierarchy tree I can access it.