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 规则中参数的名称是“background-color”，而不是 JS 等效的“backgroundColor”

Answer 2

问题是您拼写了 CSS 属性错误。你把 backgroundColor: "#43a047";它应该是 background-color: #43a047;

Answer 3

在 className={classes.button} 中，您必须使用与在 makeStyles 中相同的名称。

HexColor 在 backgroundColor 中不起作用

HexColor does not work in backgroundColor

javascript

css

reactjs

material-ui

background-color