如何使用“&：active”更改材質ui中按鈕的顏色：？

Question

我在我的項目中使用材料 ui。 我想更改按鈕的活動 state。 我正在使用材料ui的活動和hover，即

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

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

Answer 1

懸停按鈕時應用hover樣式。

在您單擊按鈕時以及在您釋放鼠標按鈕之前應用active樣式。 當您開始單擊按鈕時，您將從hover state 更改為active state。

在您的代碼中， hover和active是相同的，因此您在轉換之間看到相同的樣式。 嘗試將active state 更改為不同的東西：

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