search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.87k stars 32.26k forks source link

Newly rendered component's styles are added to <head> of original window, and not in Document Picture-In-Picture window's <head> #40902

Closed im185087 closed 9 months ago

im185087 commented 9 months ago

Hi there,

I created this blank issue since I wasn't sure if this was a bug, feature request or a support item. I've checked if there was a duplicate of this type of issue and there seems to not be any.

High level Issue:

When we have a Document Picture-In-Picture (DPIP) window open and a React component gets rendered within the DPIP window, the styles that are generated from its makeStyles are not being injected to the corresponding <head> element in the DPIP's DOM but instead are being injected to the <head> of the original window's DOM.

Context:

We have a chat in our application, and when you click on a button, you can open it in a DPIP window. We're following the examples provided on the Google developer page for this new DPIP functionality to create the DPIP window and copy the stylesheets over. We are also using createPortal from React, to take our chat and render it inside the DPIP window's <body>.

Essentially if our chat moves to the DPIP window and there are no message components rendered initially (no messages have been sent in the chat), and a message is then sent/received, their styles do not get applied. Pretty much any component that wasn't rendered initially in the original window will have the same problem.

Does anyone have any insight as to what may be happening here? Is there a way to tell MUI to inject the styles into this new <head>? Any help is appreciated.

Search keywords:

github-actions[bot] commented 9 months ago

👋 Thanks for using MUI Core!

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://mui.com/getting-started/support/. Thanks!

If you have a question on Stack Overflow, 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 commented 9 months ago

As I understand this:

im185087 commented 9 months ago

Thank you for your response, I greatly appreciate the link. I thought because the DPIP came out late last year, that it was a new issue in that respect, apologies about that. I will try applying the fix mentioned in the issue.