Javascript useStyles未根据变量更改动态分配特性

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

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

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

在

wrapper:（{loading}）=>之后执行
console.log
（{

打印

loading

的正确值，但样式不变

这是怎么回事

---

代码中有两个问题，第一个问题是您使用了两次对象分解： 而不是

const Layout=React.memo（{loading}）=>{const classes=useStyles（{loading}）；

你应该：

constlayout=React.memo（{loading}）=>{constclasses=useStyles（loading）；

因为在第一个级别中，您可以访问属性加载，第二个问题是您在错误的位置调用参数，您必须在css属性中直接调用加载，如下所示：

paddingLeft: (loading) => (loading ? 0 : 100)

这里是两个更正的链接，希望你所期待的

paddingLeft: (loading) => (loading ? 0 : 100)