Typed props when using Material UI makeStyles

Question

I'm trying to migrate some of my React components to the new makeStyles/useStyles hook API from Material UI. If I understand correctly I can keep accepting classes as a prop from parent components as long as I pass the props to useStyles:

const MyComponent = (props: Props) => {
  const { myProp } = props;
  const classes = useStyles(props);

I was wondering how to declare my Props type in that case. The equivalent with the HOC API being:

const styles = createStyles({
  a: {},
  b: {}
});

interface Props extends WithStyles<typeof styles> {
  myProp: string;
}

Here is something that works but looks a bit verbose:

const styles = createStyles({
  a: {},
  b: {}
});

interface Props extends StyledComponentProps<ClassKeyOfStyles<typeof styles>> {
  myProp: string;
}

const useStyles = makeStyles(styles);

Is there a better way? Ideally without the need for createStyles and using makeStyles inline with the styles declaration.

I'm looking for the same thing. Did you find a better way to do this? — rareyesdev
– rareyesdev, Commented Apr 28, 2020 at 22:10
@rareyesdev unfortunately I'm still using my very verbose version — Such
– Such, Commented Apr 30, 2020 at 13:50

ydanila · Accepted Answer · 2019-07-31 18:04:13Z

13

To know at compile time which properties/classes were declared, I used such workaround.

import React from 'react';
import { Theme, makeStyles } from '@material-ui/core';
import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';

interface StyleProps {
    root: BaseCSSProperties,
}

type PropsClasses = Record<keyof StyleProps, string>

let baseStyle: StyleProps = {
    root: {
        color: "red",
    },
};

const useStyles = makeStyles<Theme, StyleProps>(() => baseStyle as any);

const MyComponent = () => {
    const classes: PropsClasses = useStyles({} as StyleProps);
    return (<div className={classes.root}>This is root!</div>)
}

export default MyComponent;

Key moment here - do not forget to declare type for the classes constant.

You can reuse this types in other components and have all required information.

answered Jul 31, 2019 at 18:04

ydanila

4451 gold badge6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

acdcjunior · Accepted Answer · 2021-09-29 20:27:48Z

1

Since TypeScript 2.8 you have the ReturnType utility type:

import { makeStyles } from '@material-ui/styles'

const myStyles = makeStyles({
  root: {
    margin: '0',
  },
  foo: {
    background: '#f1f1f1',
  },
  bar: {
    marginRight: '12px',
  },
})

type MyStylesType = ReturnType<typeof myStyles>

// use MyStylesType as type

answered Sep 29, 2021 at 20:27

acdcjunior

136k37 gold badges340 silver badges312 bronze badges

Collectives™ on Stack Overflow

Typed props when using Material UI makeStyles

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related