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

Question

I have been struggling with following typescript error. We gradually changing our files to typescript. being a beginner in typescript it is so difficult me to google error. I just want to first understand the error first then before googling the solution.

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

I have tried to add {className: string} in props but then I got new errors.

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

Switch component in use

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

Answer 1

Here's an example of how I was able to make this work. It requires using {classes: any} as the properties type, which makes it just shy of ideal:

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

Based on several MUI bug reports ( #10022 and #8447 ), this seems to be a common and not fully resolved issue that depends greatly on the version of Material-UI and TypeScript.