Question

我正在尝试将我的一些React组件从Material UI迁移到新的makeStyles / useStyles挂钩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;

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

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

Answer 2

您可以轻松做到：

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

这样做时，类型将在组件中推断出来：

const classes = useStyles()

使用Material UI makeStyles时键入道具

2 个答案: