使用 Material UI makeStyles 时键入的道具

Posted 2023-02-22

【中文标题】使用 Material UI makeStyles 时键入的道具

【英文标题】：Typed props when using Material UI makeStyles

【发布时间】：2019-10-13 01:13:11

【问题描述】：

我正在尝试将我的一些 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。

【问题讨论】：

我正在寻找同样的东西。您找到更好的方法了吗？

@rareyesdev 不幸的是，我仍在使用我非常冗长的版本

【参考方案1】：

从 TypeScript 2.8 开始，您拥有 ReturnType 实用程序类型：

import  makeStyles  from '@material-ui/styles'

const myStyles = makeStyles(
  root: 
    margin: '0',
  ,
  foo: 
    background: '#f1f1f1',
  ,
  bar: 
    marginRight: '12px',
  ,
)

type MyStylesType = ReturnType<typeof myStyles>

// use MyStylesType as type

【参考方案2】：

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

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 常量声明类型。

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