Reactjs CSS更改未反映在React with React挂钩中的关联状态更改上

我想创建一个部分，其中一些部分在单击特定按钮时被禁用，我的做法是创建两个不同的CSS属性，如下所示：

export const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    disabledWithSpacing: {
      padding: theme.spacing(2),
      pointerEvents: "none",
      opacity: 0.15,
    },
    bottomPadded: {
      paddingBottom: theme.spacing(2),
    },
  })
);

我的组件如下所示：

export function SingleEmailCampaign() {
  const [disabled, setDisabled] = React.useState<disabledSections>({
    to: false,
    from_email: false,
    subject: false,
    content: false,
  });
  const classes = useStyles();
  const sections = ["to", "from_email", "subject", "content"];
  const disableSections = (sectionName: String) => {
    var new_mapping: disabledSections = disabled;
    for (let section of sections) {
      new_mapping[section] = section === sectionName ? false : true;
    }
    setDisabled(new_mapping);
    console.log(disabled);
  };
  return (
    <Container maxWidth="lg" className={classes.container}>
      <AppBar position="static" className={classes.transparentAppBar}>
        <Toolbar className={classes.containerTopPadded}>
          <Typography className={classes.title} variant="h4" noWrap>
            Let's get started
          </Typography>
          <div className={classes.appBarEnd}>
            <Button
              color="primary"
              variant="outlined"
              className={classes.button}
            >
              Schedule
            </Button>
            <Button
              color="primary"
              variant="outlined"
              className={classes.button}
            >
              Send
            </Button>
          </div>
        </Toolbar>
      </AppBar>
      <Grid container spacing={6} className={classes.containerTopPadded}>
        <Grid item xs={12} lg={12}>
          <Typography component="h1" variant="h4">
            {campaign?.name}
          </Typography>
          <Button>Edit Name</Button>
          <Box
            border={1}
            className={
              disabled.to ? classes.disabledWithSpacing : classes.spacing
            }
          >
            Sample To
          </Box>
          <Box
            border={1}
            className={
              disabled.from_email
                ? classes.disabledWithSpacing
                : classes.spacing
            }
          >
            Sample From
          </Box>
          <Box
            border={1}
            className={
              disabled.subject ? classes.disabledWithSpacing : classes.spacing
            }
          >
          </Box>
            Sample Subject
          <Box
            border={1}
            className={
              disabled.content ? classes.disabledWithSpacing : classes.spacing
            }
          >
            Sample Content
          </Box>
        </Grid>
      </Grid>
    </Container>
  );
}

导出函数SingleEmailCampaign（）{
const[disabled，setDisabled]=React.useState({
致：错，
电邮地址：false，
主题：假，
内容：假，
});
const classes=useStyles（）；
const sections=[“to”，“from_email”，“subject”，“content”]；
const disableSections=（sectionName:String）=>{
var new_映射：disabledSections=disabled；
对于（让一节一节）{
新建_映射[section]=section==sectionName？false:true；
}
setDisabled（新的_映射）；
console.log（禁用）；
};
返回(
让我们开始吧
日程
发送
{活动？.name}
编辑名称
抽样
样本来自
样本主题
样本含量
);
}

---

我的期望是，除了单击的部分之外，其他部分应该被禁用，状态正在正确更新，但是这些部分没有被禁用。任何建议都会很有帮助。

问题在于您试图复制状态的方式。您不能/不应该改变当前状态。使用时：

 var new_mapping: disabledSections = disabled;

你正在改变原始状态。您需要做的是执行浅合并。我会在上面使用扩展操作符。改变

 var new_mapping: disabledSections = disabled;

应该是

  var new_mapping: disabledSections =  {...disabled}

示例：（不是打字脚本）

---

沙盒链接：

是否尝试删除

createStyles

，而只返回styles对象？不起作用：（当我以某种方式触发热重新加载时，它会工作，然后它开始禁用其他部分。更新状态的方式一定有问题。您是否尝试在单击按钮时记录新状态值？新状态是否与以前的状态不同？

  const disableSections = (value) => {
    let new_mapping = { ...disabled };
    for (let section of sections) {
      new_mapping[section] = section === value ? false : true;
    }
    setDisabled(new_mapping);
  };