makeStyles in material-ui allows for passing a classes object

[paales]

We've been making styles extendable by something like this:

export type UseStyles<T extends (...args: never[]) => unknown> = {
  classes?: Partial<ReturnType<T>['classes']>
}
const useStyles = makeStyles({ name: 'FixedFab' })((theme: Theme) => ({
  root: {
    width: '100%',
  },
}))

type ComponentProps = UseStyles<typeof useStyles>

function Component(props: ComponentProps) {
  const { classes } = useStyles(props)

  return <div className={classes.root}>asdf</div>
}

function ExtendingComponent() {
  return <Component classes={{ root: 'foo' }} />
}

It currently isn't possible to pass the classes prop, might this be something that can be added?

[garronej]

Ok let me have a look.

[garronej]

I have released a new utility useMergedClasses in v3.3.0. Hope if fits your needs.

Could you please refer me where this property of makeStyles was documented in material UI v4, couldn't find it?

[paales]

Wooo that was fast! 🎉

It was documented here: https://v4.mui.com/styles/advanced/#makestyles

[garronej]

Thank you for pointing this missing feature out. I wasn't aware of its existence but it's a nice addition.
The migration guide should be updated soon.

Best