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

Comments

@joncursi
Copy link

@joncursi joncursi commented May 24, 2019

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

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

@oliviertassinari oliviertassinari commented May 24, 2019

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

@Angelk90
Copy link
Contributor

@Angelk90 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 oliviertassinari commented Jul 1, 2019

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

@medmin
Copy link

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

@ghosh-jaideep ghosh-jaideep commented Sep 17, 2019

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

@AndreaLombardo
Copy link

@AndreaLombardo AndreaLombardo commented Nov 15, 2019

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

@ppm-manish ppm-manish commented Nov 26, 2019

@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

@dmcshehan dmcshehan commented Dec 20, 2019

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

@xtianus79 xtianus79 commented Jun 29, 2020

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

@oliviertassinari oliviertassinari commented Jun 29, 2020

@xtianus79
Copy link

@xtianus79 xtianus79 commented Jun 29, 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.

@oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Jun 29, 2020

@xtianus79 You will find more help on StackOverflow

@xtianus79

This comment has been hidden.

@DewangS
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet