'Error while using withStyles in mui version 5

I have problem in mui/material v5.0.4 and ts v4.4.4 while using withStyles method.

I get this error for using AntSwitch component:

'AntSwitch' cannot be used as a JSX component. Its element type 'ReactElement<any, any> | Component<any, any, any> | null' is not a valid JSX element.ts(2786)

This error appeared when material-ui package version upgraded from 4 to 5.

import { withStyles } from '@mui/styles';

const AntSwitch = withStyles((theme) => ({
  root: {
    width: 28,
    height: 16,
    padding: 0,
    display: 'flex',
  },
  switchBase: {
    padding: 2,
    color: theme.palette.grey[500],
    '&$checked': {
      transform: 'translateX(12px)',
      color: theme.palette.common.white,
      '& + $track': {
        opacity: 1,
        backgroundColor: theme.palette.primary.main,
        borderColor: theme.palette.primary.main,
      },
    },
  },
  thumb: {
    width: 12,
    height: 12,
    boxShadow: 'none',
  },
  track: {
    border: `1px solid ${theme.palette.grey[500]}`,
    borderRadius: 16 / 2,
    opacity: 1,
    backgroundColor: theme.palette.common.white,
  },
  checked: {},
}))(Switch);

<AntSwitch
  checked={!isDisabled}
  onChange={(_, checked) => onToggleDisability(!checked)}
  name="Disability"
/>

reactjs material-ui

Solution 1:^[1]

Make sure versions of @types/react and react are matching, that fixed similar issue for me. Also, you can try deleting node_modules, updating Node JS and other packages as a rule of thumb.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Kutalia

'Error while using withStyles in mui version 5

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]