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

Created on 24 May 2019 · 17Comments · Source: mui-org/material-ui

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.

docs question

Source

joncursi

👍3

Most helpful comment

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);

essare on 24 Nov 2019

👍55 🎉13 ❤11 🚀4

All 17 comments

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

oliviertassinari on 24 May 2019

👎36 😕13 👍5 🎉1 😄1

I'm closing, if we see similar report, I think that we should document it.

oliviertassinari on 24 May 2019

@oliviertassinari : But if app is declared as a class how do I do it?
Because in the app I have a state and other functions.

Angelk90 on 1 Jul 2019

@Angelk90 You should use the higher order component API: https://github.com/mui-org/material-ui/issues/15820#issuecomment-495480040 (withStyles).

oliviertassinari on 1 Jul 2019

According to your documentation, the withStyles api usage example is still a function component.

https://material-ui.com/styles/basics/

That's why I down-voted your answer.

medmin on 28 Jul 2019

😕4

@oliviertassinari
How can I use makeStyles with HOC?
As per my use case, I need the material theme object in style.

ghosh-jaideep on 17 Sep 2019

👍5

As suggested by @ghosh-jaideep ,
how to have the possibility to use theme utilities such as:

[theme.breakpoints.up("md")]: {
          paddingLeft: theme.spacing(2),
          paddingTop: theme.spacing(2)
}

inside a class component?
Thanks

AndreaLombardo on 15 Nov 2019

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);

essare on 24 Nov 2019

👍55 🎉13 ❤11 🚀4

@Ess-Soft How LoginComponent is rendered from parent components?

Did you pass theme as props?
Did you use ThemeProvider in parent component?

It will be more useful if you share code snippet of parent component.

ppm-manish on 26 Nov 2019

👀2

I did the same thing as @Ess-Soft and added widthTheme before withStyles
withTheme(withStyles(useStyles)(LoginComponent ))

then you can use theme even inside the render

dmcshehan on 20 Dec 2019

👍1

Can someone explain the with styles thing. I can honestly say when I see stuff like this I think lol come on man Angular is just so much more normal. 3 hours today searching and looking for answers and then I find this.

xtianus79 on 29 Jun 2020

👍1

@xtianus79 This API works with class components too: https://material-ui.com/styles/basics/#higher-order-component-api.

oliviertassinari on 29 Jun 2020

@oliviertassinari can you show mean an example of it with the grid? lol that is what I am trying to do and I am stuck right there. I am using makeStyles and createStyles and I cant' figure out how to do it without a function? Can you help with that.

xtianus79 on 29 Jun 2020

@xtianus79 You will find more help on StackOverflow

oliviertassinari on 29 Jun 2020

@oliviertassinari for that particular issue and use case I don't see it.

xtianus79 on 30 Jun 2020

Ummm. still even https://material-ui.com/styles/basics/#higher-order-component-api doesn't answer how to use 'theme' ? why only supports functional components with Hooks? people do have legacy code or the need for class based components.