[styles] Rendering in shadow dom after upgrade to v5
See original GitHub issueSome components will lose part of styles after the version was updated to v5.
- The issue is present in the latest release(@material-ui/core 5.0.0.alpha-21)
- I have searched the issues of this repository and believe that this is not a duplicate.
Current Behavior 😯
version 5 -> the blue label will lose the font style on v5.
Expected Behavior 🤔
The expected result is that the component has the font style as the same as the below picture from version 4.
Steps to Reproduce 🕹
Sandbox showing the font style included in with @material-ui/core 4.11.2: https://codesandbox.io/s/material-demo-forked-5lveb?file=/arrival-label.tsx
Sandbox showing the font style lost with @material-ui/core 5.0.0-alpha-21: https://codesandbox.io/s/material-demo-forked-bioll?file=/TemporaryDrawerLoseFocus.tsx
Context 🔦
The issue comes out after the material-ui updated to v5.
Your Environment 🌎
`npx @material-ui/envinfo`
System:
OS: Windows 10 10.0.19041
Binaries:
Node: 12.18.3 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - C:\opt\Yarn\bin\yarn.CMD
npm: 6.14.6 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 87.0.4280.88
Edge: Spartan (44.19041.423.0), Chromium (87.0.664.66)
npmPackages:
@emotion/react: ^11.1.3 => 11.1.3
@emotion/styled: ^11.0.0 => 11.0.0
@material-ui/core: ^5.0.0-alpha.19 => 5.0.0-alpha.19
@material-ui/envinfo: ^1.0.0 => 1.0.0
@material-ui/icons: ^4.11.2 => 4.11.2
@material-ui/pickers: ^3.2.10 => 3.2.10
@material-ui/styled-engine: 5.0.0-alpha.19
@material-ui/system: 5.0.0-alpha.19
@material-ui/types: 5.1.1
@material-ui/unstyled: 5.0.0-alpha.19
@material-ui/utils: 5.0.0-alpha.19
@types/react: ^17.0.0 => 17.0.0
react: ^17.0.1 => 17.0.1
react-dom: ^17.0.1 => 17.0.1
typescript: ^4.1.3 => 4.1.3
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (4 by maintainers)
Top Results From Across the Web
[styles] Rendering in shadow dom after upgrade to v5
Some components will lose part of styles after the version was updated to v5. The issue is present in the latest release(@material-ui/core ...
Read more >Rendering React App in Shadow DOM with Style ...
Learn how to properly render a ReactJS application inside Shadow DOM with Server Side Rendering. Also see Style Encapsulation with Styled ...
Read more >5. Working with the Shadow DOM - Modern JavaScript [Book]
Any styles defined in the shadow DOM are scoped to the shadow root. They are not applied to any elements outside of this...
Read more >How to create insertion point to mount styles in shadow ...
Here is how I would do it: You need to create style tag. This will be entry point to emotion (material ui 5...
Read more >Does shadow DOM improve style performance?
Short answer: Kinda. It depends. And it might not be enough to make a big difference in the average web app. But it's...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Similarly to how you have a code for injecting the JSS styles in different mounting point, you need to do the same with emotion. Here is a working example: https://codesandbox.io/s/material-demo-forked-uypm3?file=/index.tsx
For people with a similar issue, I solved it by removing package lock files and the old
@material-ui
packages frompackage.json
. Then deleted the/node_modules
folder and reinstalled everything. Then everything looked good again (I had a square Fab again: https://github.com/mui-org/material-ui/issues/12032)