Getting Material-UI Class Names To Not Change For Snapshot Testing

It's an easy trick but one you'll be hard pressed to find. A colleague of mine is the one who actually found it. You can visit her here. I'm writing it here for my own sanity.

The trick: (copied from Material-Ui documentation)

const useStyles = makeStyles(
  {
    root: {
      /* … */
    },
    label: {
      /* … */
    },
    outlined: {
      /* … */
      "&$disabled": {
        /* … */
      },
    },
    outlinedPrimary: {
      /* … */
      "&:hover": {
        /* … */
      },
    },
    disabled: {},
  },
  { name: "MuiButton" }
)

The page is here.

By adding a name that begins with "Mui" the class name will change from non-deterministic (aka they append a number at the end of the class name) to deterministic (aka they don't append a number at the end of the class name).

That's it.