question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

@material-ui/styles: Usage in a Class Component?

See original GitHub issue

How does one use the makeStyles API within a class component? The documentation only shows examples for function components.

When I try to use this within a class component’s render method, I get the following 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.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:4
  • Comments:17 (7 by maintainers)

github_iconTop GitHub Comments

114reactions
essarecommented, Jul 23, 2020

i used withStyles instead of makeStyle like this…

import React from 'react';
import { withStyles } from '@material-ui/core/styles';

const styles = (theme) => ({
  fab: {
    position: 'fixed',
    bottom: theme.spacing(2),
    right: theme.spacing(2),
  },
});

class LoginComponent extends React?Component {
  render() {
    const { classes } = this.props;
    /** your UI components... */
  }
}

export default withStyles(syles)(LoginComponent);
67reactions
oliviertassinaricommented, May 24, 2019

You can’t use the hooks inside a class component. You need a functionnal component or to use the higher order (withStyles).

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to use useStyle to style Class Component in Material Ui
You can do it like this: import { withStyles } from "@material-ui/core/styles"; const styles = theme => ({ root: { backgroundColor: "red" } ......
Read more >
How to customize - Material UI - MUI
Learn how to customize Material UI components by taking advantage of different strategies for specific use cases.
Read more >
Material UI withStyles() for Class-based Components in React
In this example, you can get to know how we can use Material UI withStyles(HOC) for class-based components. To get access to theme...
Read more >
material-ui/styles: Usage in a Class Component? · Issue #15820
How does one use the makeStyles API within a class component? The documentation only shows examples for function components.
Read more >
The Easiest Way to Style your Material-UI Components
The makeStyles function returns a React hook that we can use in a functional component to access the styles and classes. Then, we...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found