[styles] Rendering in shadow dom after upgrade to v5

[natezhengbne]

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.

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

[n8sabes]

Fab and other button components lose their style with 5.0.0-alpha.21 (#12032). Downgrading to alpha.20 resolves the problem for now.

[oliviertassinari]

Related to rendering the components in a different mounting point, e.g. #24097 (comment).

[mnajdova]

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

[oliviertassinari]

Duplicate of #24109

[TrySpace]

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: #12032)