Как правильно выбрать тип для className компонента `material-ui`?

Question

Я использую material-ui для приложения реакции в typescript. material-ui предоставляет withStyles, которые вводятся в компонент через его className. Но я не знаю, как объявить его тип. Ниже приведен пример кода:

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 объекте и использую его как тип свойства компонента. Но я получил ниже ошибок. Как правильно определить тип свойства в машинописи?

 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'.

Answer 1

Вы можете использовать w ithStyles, W ithStyles и StyleRulesCallback из @ material-ui / core / styles для создания HOC. Подробнее о withstyles hoc здесь

Рабочая демоверсия здесь

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
);

Answer 2

После некоторых поисков я считаю, что реквизиты должны быть 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);