如何为“material-ui”组件的类名选择正确的类型？答案

【问题标题】：How to choose the right type for className of `material-ui` component?如何为“material-ui”组件的类名选择正确的类型？
【发布时间】：2019-04-23 04:46:09
【问题描述】：

我在typescript 中使用material-ui 的反应应用程序。 material-ui 提供 withStyles，它通过类名注入到组件中。但我不知道如何声明它的类型。下面是一个示例代码：

import * as React from 'react';
import Grid from '@material-ui/core/Grid';
import { withStyles, createStyles } from '@material-ui/core/styles';

const BackgroundPanelStyles = createStyles({
  root: {
    height: '16rem',
  }
});

const BackgroundPanelComponent = ({classes}: {classes: typeof BackgroundPanelStyles}) => {
  return (
    <Grid container className={classes.root}>

    </Grid>
  )
};

export const BackgroundPanel = withStyles(BackgroundPanelStyles)(BackgroundPanelComponent);

我在BackgroundPanelStyles 对象中定义了样式并将其用作组件属性类型。但我得到了以下错误。在 typescript 中定义属性类型的正确方法是什么？

 Argument of type '({ classes }: { classes: Record<"root", CSSProperties>; }) => Element' is not assignable to parameter of type 'ComponentType<ConsistentWith<{ classes: Record<"root", CSSProperties>; }, { classes: Record<"root", string>; }>>'.
  Type '({ classes }: { classes: Record<"root", CSSProperties>; }) => Element' is not assignable to type 'FunctionComponent<ConsistentWith<{ classes: Record<"root", CSSProperties>; }, { classes: Record<"root", string>; }>>'.
    Types of parameters '__0' and 'props' are incompatible.
      Type 'ConsistentWith<{ classes: Record<"root", CSSProperties>; }, { classes: Record<"root", string>; }> & { children?: ReactNode; }' is not assignable to type '{ classes: Record<"root", CSSProperties>; }'.
        Types of property 'classes' are incompatible.
          Type 'Record<"root", string>' is not assignable to type 'Record<"root", CSSProperties>'.
            Types of property 'root' are incompatible.
              Type 'string' is not assignable to type 'CSSProperties'.

【问题讨论】：

标签： reactjs typescript material-ui

【解决方案1】：

经过一番搜索，我发现道具需要是interface Props { classes: { [className in keyof typeof BackgroundPanelStyles]: string } };

以下代码按预期工作：

import * as React from 'react';
import Grid from '@material-ui/core/Grid';
import { withStyles, createStyles } from '@material-ui/core/styles';

const BackgroundPanelStyles = createStyles({
  root: {
    height: '16rem',
  }
});

interface Props { classes: { [className in keyof typeof BackgroundPanelStyles]: string } };

const BackgroundPanelComponent = ({ classes }: Props) => {
  return (
    <Grid container className={classes.root}>

    </Grid>
  )
};

export const BackgroundPanel = withStyles(BackgroundPanelStyles)(BackgroundPanelComponent);

【讨论】：

【解决方案2】：

您可以使用 @material-ui/core/styles 中的 withStyles、WithStyles 和 StyleRulesCallback 来创建 HOC。在此处阅读有关withstyles hoc 的更多信息

工作演示here

import * as React from "react";
import Grid from "@material-ui/core/Grid";
import {
  StyleRulesCallback,
  withStyles,
  WithStyles
} from "@material-ui/core/styles";

export interface BackgroundPanelComponentOwnProps {
  someProp: Boolean;
}

export type withStyleProps = "someClass" | "anotherClass";
export type BackgroundPanelComponentStyleProps = WithStyles<withStyleProps>;
export type BackgroundPanelComponentProps = BackgroundPanelComponentOwnProps &
  BackgroundPanelComponentStyleProps;

const BackgroundPanelComponent: React.SFC<BackgroundPanelComponentProps> = props => {
  return (
    <Grid container={true} className={props.classes.someClass}>
      <Grid className={props.classes.anotherClass}>Hello</Grid>
    </Grid>
  );
};

const styles: StyleRulesCallback<withStyleProps> = () => ({
  someClass: {
    height: "16rem"
  },
  anotherClass: {
    color: "red"
  }
});

export const StyledBackgroundPanelComponent = withStyles(styles)(
  BackgroundPanelComponent
);

【讨论】：