reactjs - 使用 Material UI makeStyles 时输入的 props

Question

我正在尝试将一些 React 组件从 Material UI 迁移到新的 makeStyles/useStyles Hook API。如果我理解正确的话，只要我将 Prop 传递给 useStyles，我就可以继续接受 classes 作为来自父组件的 Prop :

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

为了在编译时了解声明了哪些属性/类，我使用了这样的解决方法。

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;

这里的关键时刻 - 不要忘记声明类常量的类型。

您可以在其他组件中重用此类型并拥有所有必需的信息。