question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[styles] Rendering in shadow dom after upgrade to v5

See original GitHub issue

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 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.

image

Expected Behavior 🤔

The expected result is that the component has the font style as the same as the below picture from version 4.

image

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:closed
  • Created 3 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
mnajdovacommented, Dec 31, 2020

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

0reactions
TrySpacecommented, Nov 6, 2021

For people with a similar issue, I solved it by removing package lock files and the old @material-ui packages from package.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)

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found