reactjs - TS2339: Egenskapen 'classes' finns inte på typen 'PropsWithChildren'

Jag har kämpat med följande TypeScript-fel. Vi ändrar gradvis våra filer till TypeScript. Eftersom jag är nybörjare i TypeScript är det så svårt för mig att googla felet. Jag vill först förstå felet innan jag googlar efter lösningen.

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

Jag har försökt att lägga till {className: string} i props men då fick jag nya fel.

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

Strömbrytarkomponent i bruk

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

Svar #1

Här är ett exempel på hur jag lyckades få detta att fungera. Det kräver att man använder {classes: any} som egenskapstyp, vilket gör det nästan idealiskt:

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

Baserat på flera MUI-buggrapporter (#10022 och #8447) verkar detta vara ett vanligt och inte helt löst problem som till stor del beror på vilken version av Material-UI och TypeScript som används.

Relaterade artiklar