如何在material-ui-react中使用makeStyles中的state值

Question

我正在创建一个Webpage。我使用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。请帮我提供一些解决方案

Answer 1

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

Answer 2

一个解决方案是在组件中移动makeStyles，如果你不想在组件中转移它，那么你可以尝试这个破解

import {  makeStyles, Typography } from "@material-ui/core";
let style;
const useStyles = makeStyles((theme) => ({
container: {
backgroundColor: "white", display: style
},
}));
export default function HomePage() {
const [displayStyle, setDisplayStyle] = useState("flex")
style = displayStyle;
const classes = useStyles();
return (
<>
<div>My Page</div>
<div className={classes.container}>
<div >
<Typography  >
Our Orders
</Typography>
</div>
</div>
</>
);
}

Answer 3

只需在useStyle函数中定义状态，即可使displayStyle对useStyle function可用。

在useStyle函数内移动此行。

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

所以我们的组件看起来像这个

import {  makeStyles, Typography } from "@material-ui/core";
const useStyles = makeStyles((theme) => ({
const [displayStyle, setDisplayStyle] = useState("flex")
container: {
backgroundColor: "white", display: displayStyle
},
}));
export default function HomePage() {
const classes = useStyles();
return (
<>
<div>My Page</div>
<div className={classes.container}>
<div >
<Typography  >
Our Orders
</Typography>
</div>
</div>
</>
);
}