reactjs - Prop-uri tipizate când folosești Material UI makeStyles

Încerc să migrez unele dintre componentele mele React către noul API hook makeStyles/useStyles din Material UI. Dacă am înțeles corect, pot să continui să accept classes ca prop de la componentele părinte atâta timp cât trec props la useStyles:

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

Mă întrebam cum să declar tipul meu Props în acest caz. Echivalentul cu API-ul HOC fiind:

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

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

Iată ceva care funcționează, dar arată puțin verbose:

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

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

const useStyles = makeStyles(styles);

Există o metodă mai bună? Ideal fără nevoie de createStyles și folosind makeStyles direct în declarația stilurilor.

Răspuns #1

Pentru a ști la momentul compilării care proprietăți/clase au fost declarate, am folosit un astfel de truc.

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;

Moment important aici - nu uitați să declarați tipul pentru constanta classes.

Poți reutiliza aceste tipuri în alte componente și să ai toate informațiile necesare.