TS2339：“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}但后來我得到了新的錯誤。

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 的版本。