reactjs - Typade props när man använder Material UI makeStyles

Jag försöker migrera några av mina React-komponenter till det nya makeStyles/useStyles-hook-API från Material UI. Om jag förstår det rätt kan jag fortsätta att ta emot classes som en prop från föräldrakomponenter så länge jag skickar props till useStyles:

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

Jag undrade hur man deklarerar min Props-typ i det fallet. Motsvarigheten med HOC API är:

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

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

Här är något som fungerar men ser lite omständligt ut:

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

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

const useStyles = makeStyles(styles);

Finns det ett bättre sätt? Helst utan behov av createStyles och genom att använda makeStyles direkt med stildeklarationen.

Svar #1

För att veta vid kompileringstid vilka egenskaper/klasser som deklarerades använde jag en sådan lösning.

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;

Viktigt ögonblick här - glöm inte att deklarera typ för classes-konstanten.

Du kan återanvända dessa typer i andra komponenter och ha all nödvändig information.

Relaterade artiklar