Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Container] classes generated wrongly after migration to emotion

See original GitHub issue

Something interesting happening to clsx if classes.disableGutters is undefined or classes.fixed is undefined

But both combination produces just first undefined?

While using maxWitdh=false generates unnecessary class MuiContainer-maxWidthFalse

The issue is present in the latest release.
I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

generates class MuiContainer-maxWidthFalse
Generates undefined classes on fixed, disableGutters properties while using clsx.

Expected Behavior 🤔

Using maxWitdh=false should not generate class maxWidthFalse
No undefined classes should be applied.

Steps to Reproduce 🕹

Updated version from “@material-ui/core”: “5.0.0-alpha.21” to “@material-ui/core”: “5.0.0-alpha.22” Reference playground

Overall this probably should be changed to this.

const useUtilityClasses = (styleProps) => {
  const { classes = {}, fixed, disableGutters, maxWidth } = styleProps;

  const maxWidthClassName = `maxWidth${capitalize(String(maxWidth))}`;

  return {
    root: clsx(
      containerClasses.root,
      classes.root,
      typeof maxWidth === "string" && getContainerUtilityClass(maxWidthClassName),
      typeof maxWidth === "string" && classes[maxWidthClassName],
      fixed && containerClasses.fixed,
      fixed && classes.fixed,
      disableGutters && containerClasses.disableGutters,
      disableGutters && classes.disableGutters,
    )
  };
};