CODEWITHSUNDEEP
javascripthtmlreactjsclass
ph125
ph125

Reputation: 21

JavaScript access class variable in class function

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.

Upvotes: 0

Views: 206

Answers (2)

ph125
ph125

Reputation: 21

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

}

Upvotes: 0

Shubham Khatri
Shubham Khatri

Reputation: 281636

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

Upvotes: 1

Related Questions