Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
joncursi opened this issue May 24, 2019 · 17 comments
Closed

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

joncursi opened this issue May 24, 2019 · 17 comments
Labels
docs Improvements or additions to the documentation support: question Community support but can be turned into an improvement

Comments

@joncursi
Copy link

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 oliviertassinari added support: question Community support but can be turned into an improvement docs Improvements or additions to the documentation labels May 24, 2019
@oliviertassinari
Copy link
Member

oliviertassinari commented 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).

@oliviertassinari
Copy link
Member

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

@Angelk90
Copy link
Contributor

Angelk90 commented Jul 1, 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.

@oliviertassinari
Copy link
Member

oliviertassinari commented Jul 1, 2019

@Angelk90 You should use the higher order component API: #15820 (comment) (withStyles).

@medmin
Copy link

medmin commented Jul 28, 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.

@ghosh-jaideep
Copy link

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

@AndreaLombardo
Copy link

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
Copy link

essare commented Nov 24, 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);

@ppm-manish
Copy link

@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
Copy link

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
Copy link

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
Copy link
Member

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

@xtianus79
Copy link

@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
Copy link
Member

@xtianus79 You will find more help on StackOverflow

@xtianus79

This comment has been minimized.

@DewangS
Copy link

DewangS commented Jul 23, 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.

@oliviertassinari
Copy link
Member

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Improvements or additions to the documentation support: question Community support but can be turned into an improvement
Projects
None yet
Development

No branches or pull requests