使用 Material UI makeStyles 时键入的道具

Question

我正在尝试将我的一些 React 组件从 Material UI迁移到新的makeStyles/ useStyleshook API。如果我理解正确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

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

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;

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

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