useStyles Invalid hook call class component

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 //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?

Mohamed Atef

10 Feb 2022

Best Answer

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

Replies

Jo Micheal

10 Feb 2022

Great this example works good

useStyles Invalid hook call class component

How to use makeStyles with the class Component?

Comments

Replies