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

Question

我正在创建一个网页。我正在为组件使用 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>
        </>
    );
}