Question

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

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

TS2339：类型“ PropsWithChildren

1 个答案: