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

About the style, the menuItem styles are imported during the ssr
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

Expected Behavior 🤔

Instead of this

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

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


  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.

    OS: Linux 4.15 Ubuntu 16.04.5 LTS (Xenial Xerus)
    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
    Chrome: 87.0.4280.88
    Firefox: 84.0.2
    @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 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 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.


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


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