如何实现React按钮点击切换颜色？已配置onClick与useState状态

你已经有了showResetPass状态来控制重置密码面板的显示/隐藏，完全可以复用这个状态实现按钮颜色切换，无需额外新增状态变量，下面是两种实用的实现方式：

方法一：CSS类名动态切换 #

如果你使用MUI的makeStyles或CSS模块，先在样式中定义两种状态的按钮样式：

const useStyles = makeStyles({
  button_reset: {
    // 默认状态样式
    backgroundColor: '#05445E',
    color: '#fff',
    padding: '8px 16px',
    borderRadius: '4px',
    cursor: 'pointer'
  },
  button_reset_active: {
    // 切换后的激活状态样式
    backgroundColor: '#189AB4',
    color: '#fff'
  },
  button_light: {
    // Cancel按钮默认样式
    backgroundColor: '#f0f0f0',
    color: '#333'
  }
});

然后修改Reset Password按钮的className，根据showResetPass的值拼接类名：

<Button
  className={showResetPass ? `${classes.button_reset} ${classes.button_reset_active}` : classes.button_reset}
  onClick={() => setShowResetPass((current) => !current)}
>
  Reset Password
</Button>

如果用styled-components，可直接通过props传递状态控制样式：

const ResetButton = styled(Button)`
  background-color: ${props => props.isActive ? '#189AB4' : '#05445E'};
  color: #fff;
  padding: 8px 16px;
  borderRadius: 4px;
  cursor: pointer;
  
  &:hover {
    opacity: 0.9;
  }
`;

// 组件内使用
<ResetButton
  isActive={showResetPass}
  onClick={() => setShowResetPass((current) => !current)}
>
  Reset Password
</ResetButton>

方法二：用MUI sx属性直接动态设置 #

不想额外定义CSS类的话，直接通过MUI的sx属性结合状态写动态样式更简洁：

<Button
  sx={{
    backgroundColor: showResetPass ? '#189AB4' : '#05445E',
    color: '#fff',
    padding: '8px 16px',
    borderRadius: '4px',
    '&:hover': { opacity: 0.9 }
  }}
  onClick={() => setShowResetPass((current) => !current)}
>
  Reset Password
</Button>

可选：Cancel按钮联动样式 #

如果需要Cancel按钮在显示重置面板时同步切换颜色，同样用showResetPass状态控制：

<Button
  sx={{ 
    ml: "20px",
    backgroundColor: showResetPass ? '#D4F1F4' : '#f0f0f0',
    color: '#333'
  }}
  onClick={handleCancel}
>
  Cancel
</Button>

核心逻辑就是利用现有showResetPass状态作为开关，动态切换按钮样式，避免冗余状态的创建。

内容的提问来源于stack exchange，提问作者Jonathan Clark