How to style components using makeStyles and still have lifecycle methods in Material UI

Question

I get the below error whenever I try to use makeStyles   with a component with lifecycle methods      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          You might have mismatching versions of React and the renderer  such as React DOM    You might be breaking the Rules of Hooks   You might have more than one copy of React in the same app      Below is a small example of code that produces this error  Other examples assign classes to child items as well  I can t find anything in MUI s documentation that shows other ways to use makeStyles and have the ability to use lifecycle methods        import React    Component   from  react       import   Redirect   from  react-router-dom        import   Container  makeStyles   from   material-ui core        import LogoButtonCard from     molecules Cards LogoButtonCard        const useStyles   makeStyles theme   gt           root            display   flex           alignItems   center           justifyContent   center                          const classes   useStyles         class Welcome extends Component         render             if  this props auth isAuthenticated                return  lt Redirect to       gt                     return              lt Container maxWidth  false  className  classes root  gt               lt LogoButtonCard               buttonText  Enter                headerText  Welcome to PlatformX                buttonAction  this props auth login                gt             lt  Container gt                                export default Welcome

User · Answer

Another one solution can be used for class components - just override default MUI Theme properties with MuiThemeProvider. This will give more flexibility in comparison with other methods - you can use more than one MuiThemeProvider inside your parent component.

simple steps:

import MuiThemeProvider to your class component
import createMuiTheme to your class component
create new theme
wrap target MUI component you want to style with MuiThemeProvider and your custom theme

please, check this doc for more details: https://material-ui.com/customization/theming/

_x000D_

import React from 'react';
import PropTypes from 'prop-types';
import Button from '@material-ui/core/Button';

import { MuiThemeProvider } from '@material-ui/core/styles';
import { createMuiTheme } from '@material-ui/core/styles';

const InputTheme = createMuiTheme({
    overrides: {
        root: {
            background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
            border: 0,
            borderRadius: 3,
            boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
            color: 'white',
            height: 48,
            padding: '0 30px',
        },
    }
});

class HigherOrderComponent extends React.Component {

    render(){
        const { classes } = this.props;
        return (
            <MuiThemeProvider theme={InputTheme}>
                <Button className={classes.root}>Higher-order component</Button>
            </MuiThemeProvider>
        );
    }
}

HigherOrderComponent.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default HigherOrderComponent;

_x000D_

User · Answer

Hi instead of using hook API  you should use Higher-order component API as mentioned here I ll modify the example in the documentation to suit your need for class component import React from  react   import PropTypes from  prop-types   import   withStyles   from   material-ui styles   import Button from   material-ui core Button    const styles   theme   gt       root        background   linear-gradient 45deg   FE6B8B 30    FF8E53 90         border  0      borderRadius  3      boxShadow   0 3px 5px 2px rgba 255  105  135   3        color   white       height  48      padding   0 30px             class HigherOrderComponentUsageExample extends React Component        render        const   classes     this props      return          lt Button className  classes root  gt This component is passed to an HOC lt  Button gt                  HigherOrderComponentUsageExample propTypes       classes  PropTypes object isRequired      export default withStyles styles  HigherOrderComponentUsageExample

User · Answer

What we ended up doing is stopped using the class components and created Functional Components  using useEffect   from the Hooks API for lifecycle methods  This allows you to still use makeStyles   with Lifecycle Methods without adding the complication of making Higher-Order Components  Which is much simpler   Example   import React    useEffect  useState   from  react   import axios from  axios   import   Redirect   from  react-router-dom    import   Container  makeStyles   from   material-ui core    import LogoButtonCard from     molecules Cards LogoButtonCard    const useStyles   makeStyles theme   gt       root        display   flex       alignItems   center       justifyContent   center       margin  theme spacing 1         highlight        backgroundColor   red                Highlight is a bool const Welcome     highlight     gt       const  userName  setUserName    useState        const  isAuthenticated  setIsAuthenticated    useState true     const classes   useStyles       useEffect      gt        axios get  example com api username 12             then res   gt  setUserName res userName                 if   isAuthenticated          return  lt Redirect to       gt         return        lt Container maxWidth  false  className  highlight   classes highlight   classes root  gt         lt LogoButtonCard         buttonText  Enter          headerText  isAuthenticated  amp  amp   Welcome    userName            buttonAction  login          gt      lt  Container gt               export default Welcome

User · Answer

Instead of converting the class to a function  an easy step would be to create a function to include the jsx for the component which uses the  classes   in your case the  lt container gt  lt  container gt  and then call this function inside the return of the class render   as a tag  This way you are moving out the hook to a function from the class  It worked perfectly for me  In my case it was a  lt table gt  which i moved to a function- TableStmt outside and called this function inside the render as  lt TableStmt  gt

User · Answer

useStyles is a React hook which are meant to be used in functional components and can not be used in class components   From React      Hooks let you use state and other React features without writing a   class    Also you should call useStyles hook inside your function like   function Welcome       const classes   useStyles            If you want to use hooks  here is your brief class component changed into functional component   import React from  react   import   Container  makeStyles   from   material-ui core    const useStyles   makeStyles     root        background   linear-gradient 45deg   FE6B8B 30    FF8E53 90         border  0      borderRadius  3      boxShadow   0 3px 5px 2px rgba 255  105  135   3        color   white       height  48      padding   0 30px           function Welcome       const classes   useStyles      return        lt Container className  classes root  gt         lt h1 gt Welcome lt  h1 gt       lt  Container gt          export default Welcome       on  darr  CodeSandBox  darr

User · Answer

I used withStyles instead of makeStyle  EX     import   withStyles   from   material-ui core styles   import React   Component  from  react    const useStyles   theme   gt             root               flexGrow  1                     class App extends Component          render                     const   classes     this props                  return                       lt div className  classes root  gt                         Test                  lt  div gt                                    export default withStyles useStyles  App

[reactjs] How to style components using makeStyles and still have lifecycle methods in Material UI?

Examples related to reactjs

Examples related to material-ui