useStyles 不会根据变量更改动态分配属性

Question

基于布尔状态更改，我尝试更改组件的样式，但由于某种原因，它仅在页面刷新后显示更改。

在我的父应用程序组件中，我执行以下操作：

import React from "react";

import Layout from "./Layout";

export default function App() {

  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {

    setTimeout(() => {

      setLoading(!loading);

    }, 2000);

  }, [loading]);

  return <Layout loading={loading} />;

}

我的Layout组件捕获这个loading变量并将其发送到makeStyles钩子，

import React from "react";

import { makeStyles } from "@material-ui/core";

const useStyles = makeStyles((theme) => ({

  root: {},

  wrapper: ({ loading }) => ({

    paddingTop: 64,

    [theme.breakpoints.down("lg")]: {

      paddingLeft: loading ? 0 : 100

    }

  })

}));

const Layout = React.memo(({ loading }) => {

  const classes = useStyles({ loading });

  return (

    <div className={classes.root}>

      <div>side</div>

      <div className={classes.wrapper}>

        is loading: {JSON.stringify(loading)}

      </div>

    </div>

  );

});

export default Layout;

执行console.log后wrapper: ({ loading }) => ({打印正确的值loading，但样式没有改变。

这里发生了什么？

Answer 1

您的代码中有两个问题，第一个问题是您使用对象解构两次：而不是const Layout = React.memo(({ loading }) => { const classes = useStyles({ loading });你应该 ：const Layout = React.memo(({ loading }) => { const classes = useStyles(loading );因为在第一级中您可以访问属性加载，第二个问题是您在错误的位置调用参数，您必须直接在 css 属性中调用加载，如下所示：paddingLeft:&nbsp;(loading)&nbsp;=>&nbsp;(loading&nbsp;?&nbsp;0&nbsp;:&nbsp;100)这是两个更正的链接，希望您所期待的&nbsp;https://codesandbox.io/s/goofy-microservice-y2gql?fontsize=14&hidenavigation=1&theme=dark