如何在材质ui中的makeStyles中使用状态值做出反应答案

【问题标题】：如何在材质ui中的makeStyles中使用状态值做出反应
【发布时间】：2022-01-23 11:12:15
【问题描述】：

我正在创建一个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。请帮我解决一些问题

【问题讨论】：

标签： javascript html reactjs react-native material-ui

【解决方案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>
        </>
    );
}

【讨论】：

【解决方案2】：

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

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

【讨论】：

为什么要添加另一个名为style的变量，只是简单地将状态displayStyle放在useStyle function的范围内？

【解决方案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>
        </>
    );
}

【讨论】：