cssreactjsnpmmaterial-uimakestyles

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

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>;
Solution

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