Reactjs 使用材质UI makeStyles时键入的道具

我正在尝试从Material UI将一些React组件迁移到新的

makeStyles

/

useStyles

hook API。如果我理解正确，我可以继续将

类

作为父组件的道具接受，只要我将道具传递给

使用样式

：

constmycomponent=（props:props）=>{
const{myProp}=props；
常量类=使用样式（道具）；

在这种情况下，我想知道如何声明我的

Props

类型。与HOC API等效的是：

const styles=createStyles({
a:{}，
b:{}
});
界面道具随样式扩展{
myProp:string；
}

下面是一些有用但看起来有点冗长的东西：

const styles=createStyles({
a:{}，
b:{}
});
接口道具扩展了StyledComponentProps{
myProp:string；
}
const useStyles=生成样式（样式）；

---

有更好的方法吗？理想情况下，不需要

createStyles

并使用

makeStyles

与样式声明内联。

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

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;

从“React”导入React；
从“@materialui/core”导入{Theme，makeStyles}；
从“@material ui/core/styles/withStyles”导入{basecssprroperties}”；
接口样式道具{
root:basecssprroperties，
}
类型PropsClasses=Record
let baseStyle:StyleProps={
根目录：{
颜色：“红色”，
},
};
const useStyles=makeStyles（（）=>baseStyle，如有）；
常量MyComponent=（）=>{
const类：PropsClasses=useStypes（{}作为StyleProps）；
return（这是root！）
}
导出默认MyComponent；

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

---

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

我也在寻找相同的内容。您找到更好的方法了吗？@rareyesdev不幸的是，我仍在使用非常详细的版本