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

[joncursi]

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.

[oliviertassinari]

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

[oliviertassinari]

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

[Angelk90]

@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.

[oliviertassinari]

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

[medmin]

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.

[ghosh-jaideep]

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

[AndreaLombardo]

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

[essare]

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

[ppm-manish]

@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.

[dmcshehan]

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

[xtianus79]

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.

[oliviertassinari]

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

[xtianus79]

@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.

[oliviertassinari]

@xtianus79 You will find more help on StackOverflow

[xtianus79]

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

[DewangS]

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.

[oliviertassinari]

@DewangS See the withTheme() API: https://material-ui.com/styles/api/#withtheme-component-component.