MUI - styles by makeStyles are damaged after update MUI and React versions

Question

Using MUI Dropdown inside components library.

running the library inside Storybook it works fine.

consume the component in a different React project, the design is damaged.

Dropdown label has top: 60px, it shouldn't, Menu Item on hover have wrong background color, Menu has extra padding-bottom and more.

Inspecting (for example: the Label) it has this makeStyles class:

.makeStyles-root-12 {
    top: 60px;
}

this bad behavior is happening after update MUI version in the components library:

    "@emotion/react": "^11.8.1",
    "@emotion/styled": "^11.8.1",
    "@mui/material": "^5.4.4",
    "@mui/styles": "^5.6.1",
    "@mui/x-data-grid-pro": "^5.6.0",

and updating the project (consuming the library) React version to 17:

    "react": "^17",
    "react-dom": "^17",

make things weirded, there is a flow of events that make the styles right again:

go to different tab -> return to first tab (where Dropdowns at) -> styles are as should be

make things even more weird: the same project on a different computer don't experience this issue.

Dropdown's Label from the components library

const useLabelStyles = makeStyles<
  {},
  { disabled: LazyBoolean; hasTooltip: LazyBoolean; readOnly?: boolean }
>({
  root: {
    fontSize: '14px !important',
    lineHeight: '20px !important',
    color: ({ disabled, readOnly }) =>
      disabled || readOnly
        ? 'var(--neutral-element-50) !important'
        : 'var(--neutral-element) !important',
    marginRight: ({ hasTooltip }) => (hasTooltip ? '10px !important' : ''),
    fontFamily: 'Open Sans !important',
  },
});

const labelClasses = useLabelStyles({
    disabled,
    readOnly,
    hasTooltip: Boolean(tooltipText),
  });

<InputLabel
  data-testid={generateDropdownTestIdWithSuffix(TEST_ID_SUFFIX.LABEL)}
  classes={labelClasses}
>
  {label}
</InputLabel>;

Answer 1

The issue was that I had another component that used a different version of MUI. Each component in my project has its npm package. Because of that, I had a clash between the versions. IT WAS FIXED once I updated all the components to use the newer MUI version.

Answer 2

This behaviour could be related to:

@mui/styles is the legacy styling solution for MUI. It depends on JSS as a styling solution, which is not used in the @mui/material anymore, deprecated in v5. If you don't want to have both emotion & JSS in your bundle, please refer to the @mui/system documentation which is the recommended alternative.

@mui/styles is not compatible with React.StrictMode or React 18.

You can check more about it here.

Also, the Mui documentation has a guide about migration from v4 to v5, and a specific section related to styles here.

So, basically you should go from @mui/styles to @mui/material

Answer 3

I faced the same problem today when using mui versions 5.15.14 in a React Storybook project and consuming them in a different next js project. Nexx.js project used 5.15.10. When both were updated to the 5.15.14 version issue was fixed.