user image

Jo Micheal
Published in : 2022-02-10

useStyles Invalid hook call class component

React js

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

When I try to use makeStyles from the Material UI in my class component it makes 

The entire component 

import React from 'react';
import { Box, makeStyles, Typography } from '@material-ui/core';
import Page from 'src/components/Page';
import './style.css';

const useStyles = makeStyles(() => ({
  root: {}
}));

class HomeView extends React.Component {
  
  render(){

    const classes = useStyles();

    return (
      <Page title="Homepage">
        <Box p={10} class={classes.root}>
            <Typography variant='h1' color="textPrimary">
              Hello world
            </Typography>
        </Box>
      </Page>
    );
  }
}
export default HomeView;

How to use makeStyles with the class Component?

Comments

Mohamed Atef Date : 2022-02-10

Best answers

46

Best answers

46

You can do this using a function called withStlyes this function made for class component like the code blow 

import React from 'react';
import { Box, withStyles, Typography } from '@material-ui/core';
import Page from 'src/components/Page';
import './style.css';

const styles = ({
  root: {
    padding: '90px'
  }
});

class HomeView extends React.Component {
  
  render(){

    const { classes } = this.props;

    return (
      <Page title="Homepage">
        <Box p={10} className={classes.root}>
            <Typography variant='h1' color="textPrimary">
              Hello world
            </Typography>
        </Box>
      </Page>
    );
  }
}
export default withStyles(styles)(HomeView);

Please note that at the end when I exported the component class I added the function with it and passed the styles to the function so when you try to console.log(this.props); you will find that classes has been added to the component props with the styles you wrote above 
that's all Good Luck

Jo Micheal Date : 2022-02-10

Great this example works good

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

React Redux : Connect is not called
Publish date: 2022-03-02 | Comments: 1

Tag: React js

Best way to update the state in one class component from the redux store?
Publish date: 2022-03-30 | Comments: 3

Tag: React js

Could not be processed as an image because it has an invalid content type
Publish date: 2021-12-08 | Comments: 0

Tag: React js

React usestate array map() is not working
Publish date: 2022-04-22 | Comments: 3

Tag: React js

Export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'
Publish date: 2022-04-02 | Comments: 2

Tag: React js

React Component displaying a list of lines
Publish date: 2022-03-19 | Comments: 3

Tag: React js