HexColor 在 backgroundColor 中不起作用

Question

我有這個小代碼，里面有兩個按鈕，當我將鼠標指向它時，我希望第一個按鈕的顏色變為綠色，當我將鼠標指向它時，第二個按鈕的顏色變為紅色

但是當我把顏色的名字放在“backgroundColor”里面的時候，我沒有發現代碼有什么問題，但是當我把“hex like (#43a047)”放進去的時候就不行了，請問怎么解決呢？

const useStyles = makeStyles({
  button1: {
    backgroundColor: "none",
    "&:hover": {
      backgroundColor: "#43a047",
      color: "#e8e4e4",
    },
  },
  button2: {
    backgroundColor: "none",
    "&:hover": {
      backgroundColor: "#e53935",
      color: "#e8e4e4",
    },
  },
});

 <ButtonGroup
              style={{
                // color: "#f8f4fc",
                // backgroundColor: "#282c3c",
                maxWidth: "206px",
                maxHeight: "40px",
                minWidth: "206px",
                minHeight: "40px",
                // marginRight: 10,
              }}
              aria-label="outlined primary button group"
            >
              <Button
                style={{
                  maxWidth: "100px",
                  minWidth: "100px",
                }}
                className={classes.button}
              >
                approve
              </Button>
              <Button
                style={{
                  maxWidth: "100px",
                  minWidth: "100px",
                }}
              >
                reject
              </Button>
            </ButtonGroup>

Answer 1

我不是 100% 確定這將如何轉換為 CSS，但在 CSS 規則參數的名稱是“背景顏色”，而不是 JS 等效的“背景顏色”

Answer 2

問題是您拼錯了 CSS 屬性。 你把 backgroundColor: "#43a047"; 它應該是 background-color: #43a047;

Answer 3

在className={classes.button}中，您必須使用與makeStyles中相同的名稱。