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: (loading) => (loading ? 0 : 100)

这是两个更正的链接，希望您所期待的 https://codesandbox.io/s/goofy-microservice-y2gql?fontsize=14&hidenavigation=1&theme=dark