0

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>;
Itay Tur
  • 683
  • 1
  • 15
  • 40

1 Answers1

0

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

Luis Paulo Pinto
  • 5,578
  • 4
  • 21
  • 35
  • did that :( thats why it works on the library app. i just don't understand why it's not working on the consuming project – Itay Tur Jun 01 '22 at 12:04
  • Maybe it's worth changing one simple component from `makestyles` to `styled()` just to check if the same behaviour persists. – Luis Paulo Pinto Jun 01 '22 at 12:12
  • good point, will try – Itay Tur Jun 01 '22 at 12:30
  • Another day i did a code sample to test something and with `makeStyles` i had to insert an `! important` to style get effect. You can check it [here](https://codesandbox.io/s/stack-style-components-vs-makestyles-oriwrs?file=/src/MakeStyles_Example.jsx) – Luis Paulo Pinto Jun 01 '22 at 12:42
  • 1
    thx for the response but my issue is that the whole mui css isn't working right. important might help if it was one thing but there is too much. – Itay Tur Jun 01 '22 at 14:00