类函数中的 JavaScript 访问类变量

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

也许有人知道如何在函数"render(("中访问"useStyles"？也许静态变量不是好的选择。

Answer 1

makeStyles返回一个钩子，该钩子旨在与功能组件而不是类组件一起使用。因此，您可以将博客文章转换为功能组件，例如

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

或利用 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);

请访问Material-UI docs了解更多详情

Answer 2

已回答

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