causes style crash with initialy hidden components (Drawer, menuitems…) #SSR

  • [ x] The issue is present in the latest release.
  • [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The needed classes are not imported and I get this drawer
image

About the style, the menuItem styles are imported during the ssr
image
But then the client does not generate all the needed css, in this case only gets MuiButtonBase because is used somewhere else in the page
image

Expected Behavior 🤔

Instead of this
image

=> In this case I get the good style because in the main page are there some menuItems and the style is imported
image

=> If I remove StylesProvider injectFirst is solved but then I have problems with the priority in other places with styled components

Steps to Reproduce 🕹

Here is the simple version of what I do, but cannot reproduce in the sandbox
https://codesandbox.io/s/material-ui-issue-forked-qvrwh?fontsize=14&hidenavigation=1&theme=dark

Steps:

  1. Wrap the app with StylesProvider injectfirst
  2. Activate SSR
  3. Put elements in a Drawer like MenuItem

Context 🔦

It breaks the style of many parts of the app which are initially hidden (drawer, menuitems…)

Your Environment 🌎

`npx @material-ui/envinfo`
  Don't forget to mention which browser you used.
  Output from `npx @material-ui/envinfo` goes here.

  System:
    OS: Linux 4.15 Ubuntu 16.04.5 LTS (Xenial Xerus)
  Binaries:
    Node: 12.20.0 - ~/.nvm/versions/node/v12.20.0/bin/node
    Yarn: 1.15.2 - /usr/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v12.20.0/bin/npm
  Browsers:
    Chrome: 87.0.4280.88
    Firefox: 84.0.2
  npmPackages:
    @emotion/styled:  10.0.27 
    @material-ui/core: ^4.11.0 => 4.11.0 
    @material-ui/icons: ^4.9.1 => 4.9.1 
    @material-ui/lab: ^4.0.0-alpha.57 => 4.0.0-alpha.57 
    @material-ui/styles: ^4.10.0 => 4.10.0 
    @material-ui/system:  4.9.14 
    @material-ui/types:  5.1.0 
    @material-ui/utils:  4.10.2 
    @types/react: ^16.9.5 => 16.9.55 
    react: ^17.0.0 => 17.0.0 
    react-dom: ^17.0.0 => 17.0.0 
    styled-components: ^5.2.1 => 5.2.1 

It happens with Mozilla, Chrome...

Thank you for your help !

Functional

Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.

Performance

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

Analytics

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.

Advertisement

Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.

Others

Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.