JavaScript access class variable in class function

Question

class BlogPost extends Component{
static useStyles = makeStyles({
    grid_container: {
      marginTop:'10px',
      flex:1,
      justifyContent:'center',
      alignItems:'center'
    },
  });

render() {
    return(
      <Card elevation={5} >
      <Grid container spacing={0} className={useStyles.grid_container}> /* MY QUESTION IS HERE */

      </Grid>
      </Card>
    );
   }

}

Maybe someone knows how to access 'useStyles' in function 'render()'? Maybe static variable isn't good choice.

Shubham Khatri · Accepted Answer · 2020-05-18 17:49:04Z

makeStyles, returns a hook, that is intended to be used with functional component and not class components. So either you can convert your BlogPost to a functional component like

const useStyles = makeStyles({
    grid_container: {
      marginTop:'10px',
      flex:1,
      justifyContent:'center',
      alignItems:'center'
    },
  });
const BlogPost = () =>{
    const styles = useStyles():
    return(
      <Card elevation={5} >
      <Grid container spacing={0} className={styles.grid_container}>

      </Grid>
      </Card>
    );

}

or make use of withStyles HOC

const styles = {
    grid_container: {
      marginTop:'10px',
      flex:1,
      justifyContent:'center',
      alignItems:'center'
    },
  };

class BlogPost extends Component{

    render() {
        const { classes } = this.props;
        return(
          <Card elevation={5} >
          <Grid container spacing={0} className={classes.grid_container}> 

          </Grid>
          </Card>
        );
       }

}

export default withStyles(styles)(BlogPost);

Please visit the Material-UI docs for more details

ph125 · Accepted Answer · 2020-05-20 15:08:16Z

0

Answered

const useStyles = makeStyles({
    grid_container: {
      marginTop:'10px',
      flex:1,
      justifyContent:'center',
      alignItems:'center'
    },
  });
const BlogPost = () =>{
    const styles = useStyles():
    return(
      <Card elevation={5} >
      <Grid container spacing={0} className={styles.grid_container}>

      </Grid>
      </Card>
    );

}

answered May 20, 2020 at 15:08

ph125

211 silver badge4 bronze badges

Collectives™ on Stack Overflow

JavaScript access class variable in class function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related