如何使用“&：active”更改材质ui中按钮的颜色：？

Posted 2023-02-22

【中文标题】如何使用“&：active”更改材质ui中按钮的颜色：？

【英文标题】：How to change color of button in material ui using "&:active":?

【发布时间】：2021-07-07 05:22:15

【问题描述】：

我在我的项目中使用材质 ui。我想更改按钮的活动状态。我正在使用材质ui的活动和悬停，即

const useStyles = makeStyles((theme) => (
  button: 
    "&:hover": 
      boxShadow: "none",
      background: "red"
    ,
    "&:active": 
      boxShadow: "none",
      background: "black"
    
  
));

但悬停工作正常，但未激活。 https://codesandbox.io/s/material-demo-forked-zv9vt?file=/demo.js

【问题讨论】：

请设置一个可以重现问题的演示。

【参考方案1】：

hover 样式在您悬停按钮时应用。

active 样式在您单击按钮时以及在您释放鼠标按钮之前应用。当您开始单击按钮时，您会从 hover 状态更改为 active 状态。

在您的代码中，hover 和 active 是相同的，因此您在转换之间看到相同的样式。尝试将active 状态更改为不同的状态：

button: 
  "&:hover": 
    boxShadow: "none",
    background: "red"
  ,
  "&:active": 
    boxShadow: "none",
    background: "yellow"
  

【讨论】：

@PriyankDeepSingh 您可能希望在看到活动样式之前按住鼠标按钮一段时间

但是当发布时......它会丢失

@PriyankDeepSingh 是的，它按预期工作。请参阅this 文章。

需要使用 active 更改按钮的颜色？？不能是chabge