Material-ui: [Material-UI/Style v4] hook classes from makeStyles should place after default classes

[apemost]

• [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 🤔

<style data-jss="" data-meta="MuiAppBar">
.MuiAppBar-root-1 {
  width: 100%;
  display: flex;
  z-index: 1100;
  box-sizing: border-box;
  flex-shrink: 0;
  flex-direction: column;
}
...
</style>
<style data-jss="" data-meta="Hook">
.Hook-appBar-vqu9so {
  z-index: 1201;
}
</style>

Current Behavior 😯

<style data-jss="" data-meta="Hook">
.Hook-appBar-vqu9so {
  z-index: 1201;
}
</style>
<style data-jss="" data-meta="MuiAppBar">
.MuiAppBar-root-1 {
  width: 100%;
  display: flex;
  z-index: 1100;
  box-sizing: border-box;
  flex-shrink: 0;
  flex-direction: column;
}
...
</style>

Steps to Reproduce 🕹

Link:

1.
2.
3.
4.

Context 🔦

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | 4.0.0-alpha.2 |
| React | 16.8.4 |
| Browser | Chrome |
| TypeScript | 3.3.3333 |
| etc. | |

[oliviertassinari]

@apemost v4.0.0-alpha.3 was released, it should solve your problem. Let us know if it's not the case.

[apemost]

@oliviertassinari Thanks!

[brown11188]

I'm using version ^3.0.0-alpha.10 and still getting this bug. Any though for this? Thanks in advance.

[oliviertassinari]

@brown11188 v4-alpha solves the problem. As a v3 users, you should follow: https://material-ui.com/css-in-js/basics/#migration-for-material-ui-core-users.

[alexbuczynsky]

I am having this issue now with v4.0.1

My environment:

| Tech | Version |
|--------------|---------|
| Material-UI | v4.0.1 |
| React | 16.8.6 |
| Browser | Chrome |
| TypeScript | 3.4.5 |
| etc. | |

When using makeStyles hook, the root class is still on top:

When using createStyles coupled with withStyles the root class is on bottom as expected:

[gregrafferty]

I am having this issue now with v4.0.1

I'm getting the same issue with the same environment, trying to override the margins on the Typography component but having no luck as the defaults are added after.

[mikew]

I'm also seeing this when using withStyles with 4.0.1.

[oliviertassinari]

Any reproduction?

[dance2die]

Hi @oliviertassinari

I am having a similar issue after moving an AppBar component into a different file (used to be a part of big component but refactored it into <TitleBar /> in my demo sandbox.

Demo Sandbox

https://codesandbox.io/s/material-ui-drawer-xbzvs

Style added out of order

You can see that the z-index of .MuiAppBar-root is overriding the one created by makeStyle (.makeStyles-appBar-3).

Below shows that .MuiAppBar-root is added after makeStyles style.

Previously working Sandbox

Here is the Sandbox that was working before refactoring AppBar into different file.

https://codesandbox.io/s/material-ui-drawer-roql9

[oliviertassinari]

@dance2die I wouldn't move any useStyles hook into a different file if I was you, why not doing it with the styles object, but not with the hook. You need to import the useStyle module last. It will solve your problem.

[dance2die]

Thank you @oliviertassinari.

Moving the useStyles as the last import did solve the issue.

why not doing it with the styles object, but not with the hook

So should I be exporting the style object and create a style in each component using makeStyles?
I was exposing a hook because I needed an access to the theme object.

The below shows that the appBar should appear on top of the drawer.

appBar: {
      zIndex: theme.zIndex.drawer + 1,
      ...
    },

I'll read over the styling documentation more and come back as well 🙂

[ynotravid]

Just fyi, in case it might save someone some time.

I was encountering this same issue when using components from a shared library. Those components also use MUI so they have a peer dependency with my app.

As it turns out my app was installing a different version of @material-iu/styles (4.2.1 vs 4.3.0). because of this I had installed @material-ui/styles twice; once in /node_modules/@material-ui/styles and also in /node_modules/@material-ui/core/node_modules/@material-ui/styles. This caused the shared components to use a different makesStyles() instance which ended up causing the incorrect injection order.

The fix was to make sure both repos are using the exact same version. I tested this by setting the resolve property in package.json, which worked, but probably easier is just to explicitly set the same version of @material-ui/core in both repos and let core decide which version to bring in.