It's an easy trick but one you'll be hard pressed to find. A colleague of mine is who actually found it. 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.