时间戳

首页 > 解决方案 > 如何使用“&：active”更改材质ui中按钮的颜色：？

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

问题描述

我在我的项目中使用材料 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

标签： javascriptreactjsecmascript-6material-uifrontend

解决方案

hover悬停按钮时应用样式。

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

在你的代码中，hover和active都是一样的，所以你看到的过渡风格是一样的。尝试将active状态更改为不同的东西：

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

推荐阅读