如何在materail ui React中的makeStyles中使用状态值

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. Styles我想根据值设置state。请帮我提供一些解决方案

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