'classes' is missing in props validation - Linting

Question

I am experiencing some issue with the linting. It has always worked but today is complaining about the props "classes". I am using React Hooks.

My components have this structure

import { withStyles, WithStyles } from '@material-ui/core/styles'

interface Props extends WithStyles<typeof styles> {
  firstProps: string
  secondProps: number
  thirdProps: Function
}

const MyComponent = ({
  classes,
  firstProps,
  secondProps
  thirdProps
}: Props) => {
  ...my code...
}

export default withStyles(styles)(MyComponent)

I understand that I should pass the classes in the interface such as:

interface Props extends WithStyles<typeof styles> {
  firstProps: string
  secondProps: number
  thirdProps: Function
  classes: {
  ... all my classes ..
  }
}

BUT this is something that I want to avoid because is crumbersome AND because I think export default withStyles(styles)(MyComponent) should be enough (as it were before today).

With the current code, I am getting a lot of lint errors such as:

'classes' is missing in props validation
'classes.img' is missing in props validation
'classes.currentSelect' is missing in props validation
'classes.todayDate' is missing in props validation

Answer 1

It will be more helpful in how to use style

https://material-ui.com/styles/basics/#higher-order-component-api

Answer 2

If you are using hooks why not use makeStyles?

https://material-ui.com/styles/basics/#hook-api

And if you are using it with typescript I would recommend using it with createStyles()

https://material-ui.com/styles/api/#createstyles-styles-styles

Answer 3

SOLVED

In package.json change "eslint-plugin-react": "^7.17.0", to "eslint-plugin-react": "7.20.0"