Типизированные реквизиты при использовании Material UI makeStyles

Question

Я пытаюсь перенести некоторые из моих компонентов React в новый makeStyles / useStyles ловушечный API из Material UI. Если я правильно понимаю, я могу продолжать принимать classes в качестве реквизита от родительских компонентов, пока я передаю реквизиты useStyles:

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

Мне было интересно, как объявить мой тип Props в этом случае. Эквивалент с HOC API:

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

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

Вот кое-что, что работает, но выглядит немного многословно:

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

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

const useStyles = makeStyles(styles);

Есть ли лучший способ? В идеале без необходимости createStyles и использования makeStyles в соответствии с объявлением стилей.

Answer 1

Вы можете просто сделать:

const useStyles = makeStyles({
  a: {},
  b: {}
})

И типы будут включены в компонент при выполнении:

const classes = useStyles()