reactjs - TS2339 : Property 'classes' does not exist on type 'PropsWithChildren

Question

我一直在努力解决 typescript 错误。我们逐渐将文件更改为 typescript 。作为 typescript 的初学者，我很难搜索错误。我只想先了解错误，然后再谷歌搜索解决方案。

TS2339: Property 'classes' does not exist on type 'PropsWithChildren<ConsistentWith<ConsistentWith<{}, { classes: Record<"root" | "switchBase" | "thumb" | "track" | "checked" | "focusVisible", string>; }>, { classes: Record<"root" | "switchBase" | "thumb" | "track" | "checked" | "focusVisible", string>; }> | ConsistentWith<...>>'.

我试图添加 {className: string}在 Prop 中，但后来我遇到了新的错误。

const IOSSwitch = withStyles(theme => ({
  root: {
    width: 42,
    height: 26,
    padding: 0,
    margin: theme.spacing(1),
  },
  switchBase: {
    padding: 1,
    '&$checked': {
      transform: 'translateX(16px)',
      color: theme.palette.common.white,
      '& + $track': {
        backgroundColor: '#52d869',
        opacity: 1,
        border: 'none',
      },
    },
    '&$focusVisible $thumb': {
      color: '#52d869',
      border: '6px solid #fff',
    },
  },
  thumb: {
    width: 24,
    height: 24,
  },
  track: {
    borderRadius: 26 / 2,
    border: `1px solid ${theme.palette.grey[400]}`,
    backgroundColor: theme.palette.grey[50],
    opacity: 1,
    transition: theme.transitions.create(['background-color', 'border']),
  },
  checked: {},
  focusVisible: {},
}))(({ classes, ...props }) => {
  return (
    <Switch
      focusVisibleClassName={classes.focusVisible}
      disableRipple
      classes={{
        root: classes.root,
        switchBase: classes.switchBase,
        thumb: classes.thumb,
        track: classes.track,
        checked: classes.checked,
      }}
      {...props}
    />
  );
});

使用中的开关组件

<IOSSwitch
  checked={state.checkedB}
  onChange={handleChange('checkedB')}
  value="checkedB"
/>

Answer 1

这是我如何能够完成这项工作的一个例子。它需要使用 {classes: any}作为属性类型，这使得它有点不理想:

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

const styles = createStyles({
  root: {
    fontFamily: 'monospace',
    whiteSpace: 'pre',
  },
});

const Pre: React.FC<{ classes: any }> = ({ classes, children }) => {
  return <div className={classes.root}>{children}</div>;
};

export default withStyles(styles)(Pre);

根据多个 MUI 错误报告( #10022 和 #8447 )，这似乎是一个常见且尚未完全解决的问题，很大程度上取决于 Material-UI 和 TypeScript 的版本。