Material-ui: [Hooks] CSS applied in wrong order (SSR/nested component)

[Skaronator]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

CSS Styles should be applied in the correct order

Current Behavior 😯

CSS Styles are not applied in the correct order but the SSR seems to be correct. Spamming F5:

Steps to Reproduce 🕹

Link: https://github.com/Skaronator/MUI-CSS-SSR-Bug

1. yarn install && yarn dev
2. Open http://localhost:3000/ and it'll show 3 round buttons all with equal height/width but after 100 ms the middle one will get smaller.
3. If you inspect the svg css classes of the email icon you can see that the default style (1em) overwrites the custom applied ones (32px)

Context 🔦

The components are imported in pages/index.js and pass through to the src/SocialButton.js component. The SocialButton Component applies width and height styles but they are overwritten by the default styles of the @material-ui/icons/Mail component.

• If you import the Mail Icon in src/SocialButton.js the styles are correctly applied. (Line 9)

• If you modify anything in src/SocialButton.js (Rename for example line 24) then the styles are correctly applied thanks to hot reload.

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v3.7.1 (latest) |
| React | next (hooks) |
| Browser | Chrome 71 stable, windows |

[oliviertassinari]

@Skaronator Did you follow this step? https://material-ui.com/css-in-js/basics/#migration-for-material-ui-core-users

[Skaronator]

Yes, I've created a minimized version which reproduce this issue. I used the latest version of the nextjs-hooks example and pushed my changes in the second commit.

https://github.com/Skaronator/MUI-CSS-SSR-Bug/commit/a58c7b95cfc462ac7e6bbbf34ff3ac43ae1fb1e5

[oliviertassinari]

@Skaronator Ok, I have figured out what's happening. You would have the same issue with the non-hook API as well as the older styling API. We rely on the import order to determine the CSS injection order since day 1. This change solves the problem. It's making sure makeStyles of SocialButton is called after withStyles of the @material-ui/core/SvgIcon module.

-import SocialButton from '../src/SocialButton';

import MailIcon from '@material-ui/icons/Mail';
import GithubLogo from '../src/svg/github';
import TwitterLogo from '../src/svg/twitter';

+import SocialButton from '../src/SocialButton';

[Skaronator]

@oliviertassinari Oh wow never thought this would be the issue but yeah, it makes sense. Thanks for finding the issue in my code!

[oliviertassinari]

Also, I would expect the same problem with styled-components. As far as I know, they rely on the same specificity order logic. Happy to help!

[oliviertassinari]

Thank you for the donation, compounded to many people, it matters, a lot ❤️ !