gpt4 book ai didi

javascript - 如何在 Material ui react 中的makeStyles中使用状态值

转载 作者:行者123 更新时间:2023-12-05 05:51:00 28 4
gpt4 key购买 nike

我正在创建一个网页。我正在为组件使用 Material UI。这是代码:

import {  makeStyles, Typography } from "@material-ui/core";
const useStyles = makeStyles((theme) => ({

container: {
backgroundColor: "white", display: displayStyle
},

}));
export default function HomePage() {
const classes = useStyles();

const [displayStyle, setDisplayStyle] = useState("flex")

return (
<>
<div>My Page</div>
<div className={classes.container}>
<div >
<Typography >
Our Orders
</Typography>
</div>
</div>
</>
);
}

我有一个名为 displayStyle 的状态。我想在 makeStyles 中使用这个状态值。但它显示 displayStyle 未定义,因为它在函数内部。如何在 makeStyles 中使用它。我想根据 state 值设置 Styles。请帮我解决一些问题

最佳答案

state 在组件中可用。因此,您需要将 useStyles 移动到您的组件中以访问 displayStyle:

import {  makeStyles, Typography } from "@material-ui/core";
export default function HomePage() {
const [displayStyle, setDisplayStyle] = useState("flex")

const useStyles = makeStyles((theme) => ({
container: {
backgroundColor: "white", display: displayStyle
},
}));
const classes = useStyles();


return (
<>
<div>My Page</div>
<div className={classes.container}>
<div >
<Typography >
Our Orders
</Typography>
</div>
</div>
</>
);
}

关于javascript - 如何在 Material ui react 中的makeStyles中使用状态值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70445476/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com