Setting default portal container

[sandorvasas]

Hi,
How is it possible to set the default portal container for MUI? I need to use the global portal, but I also need the elements to appear inside my root div, so they are still inside various <XXProvider> components. We have a large app and it'd be tedious to refactor each component to use its own <Portal>.

[support]

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[oliviertassinari]

(It's possible)

[sandorvasas]

I'm reposting this as a bug as I find there's no global portal setting for its container.

[oliviertassinari]

Right, this seems accurate. We could introduce a getThemeProps into the Portal component so developers can set a container prop globally with theme.props.MuiPortal.container.

The workaround is to set the prop it at the parent level.

[oliviertassinari]

so they are still inside various components.

@sandorvasas I'm confused by this part. What's your use case for not using document.body as a DOM container of the portals?

[oliviertassinari]

but I want the elements to appear inside the root div of the app, so they are still wrapped in the appwise components (Redux, Apollo, etc).

Ok, it seems to answer my previous question. So you don't need to change the container.

[sag1v]

@olegberman Isn't this a bug? Considering theres no way to pass props to Portal via the theme like any other component.
If you do consider this as a bug, will this get fixed in v4 as well?

BTW, a lot of use cases of containers are related to shadow-dom

[oliviertassinari]

See #17473 for the support of shadow dom. It's not something we are supporting natively.

[SuchMonkey]

Setting default props for the Portal via the theme would indeed be very helpful. Alternatively a PortalRootProvider component could also work. Similar to the CacheProvider component where we can specify the insertion point for generated css.