Invalid hook call. Hooks can only be called inside of the body of a function component when apply style to class base component with material-ui

Question

I am just started to learn reactjs using material-ui but getting this error when apply style to my component. My code:

const useStyles = makeStyles(theme => (         


        

Answer 1

Use withStyles:

App.js:

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

const styles = theme => ({
    paper: {
        padding: theme.spacing(2),
        // ...
    },
    // ...
})

class App extends React.Component {
    render() {
        const {classes} = this.props
        // ...
    }
}

export default withStyles(styles)(App)

Root.js:

import React, {Component} from 'react'
import App from './App'
import {ThemeProvider} from '@material-ui/styles'
import theme from '../theme'

export default class Root extends Component {
    render() {
        return (
                
                    
                
        )
    }
}

theme.js:

import {createMuiTheme} from '@material-ui/core/styles'

const theme = createMuiTheme({
    palette: {
        primary: ...
        secondary: ...
    },
    // ...
}

export default theme

^{See Theming - Material-UI.}

---

See Higher-order component API.