单击时立即更改材质 UI 组件的背景颜色？答案

【问题标题】：Changing the background color of a material UI component instantly on click?单击时立即更改材质 UI 组件的背景颜色？
【发布时间】：2021-03-30 06:12:57
【问题描述】：

我已经设法在点击事件中使用状态来更改按钮的背景颜色。

不幸的是，在鼠标离开按钮之前，背景颜色不会改变。

如何在点击事件发生后立即显示此更改？

这是我的按钮 JSX。按钮从 SideBar 组件继承其属性。

export default function NavButtons(props) {

const classes = useStyles();

return (
    props.buttons.map(button => {
        return (
            <Button elevation={0} disableRipple
                className={button.id === props.activeMenu? classes.buttonSecondary : classes.button} key={button.id} 
                color={button.id === props.activeMenu ? "default" : "primary"} onClick={() => props.handleClick( button.id)}> 
                {button.icon}<span style={{marginLeft: "0.5rem"}}>{button.label}</span>
            </Button>
        )
    })
)}

以及SideBar组件的相关部分：

  const classes = useStyles();
  const [clickedButton, setClickedButton] = useState(null);
  const [bgColor, setBgColor] = useState(null);

  const handleActivate = function(key) {
    setClickedButton(key);
    setBgColor(light.palette.secondary.main);
  };
   

    return (
      <div className={classes.sideBar}>
        <NavButtons buttons={Buttons} handleClick={handleActivate} activeMenu={clickedButton} background={bgColor} />
      </div>
    );

任何帮助将不胜感激！

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

看起来您的 setState 正在更新按钮的基本背景颜色，但不是“onHover”颜色。这是一个操纵 Material UI 的悬停样式的示例，只需添加一些 css onClick： MaterialUI Custom Hover Style

【讨论】：