十六进制颜色在背景颜色中不起作用答案

【问题标题】：HexColor does not work in backgroundColor十六进制颜色在背景颜色中不起作用
【发布时间】：2022-02-04 23:45:58
【问题描述】：

我有这个小代码，里面有两个按钮，当我将鼠标指向它时，我希望第一个按钮的颜色变为绿色，当我将鼠标指向它时，第二个按钮的颜色变为红色它

但是当我把颜色的名字放在“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>

【问题讨论】：

如果有帮助，您可以尝试使用background 代替backgroundColor 吗？他们像这样使用它here
问题依然存在
哦，在useStyles 中有button1 和button2，但在<Button> 中有{classes.button}。在此处添加数字或更改班级的全名。
天哪，忘记改了，谢谢，已经修好了
我会把它变成一个答案，这样你就可以将它标记为已回答。

标签： javascript css reactjs material-ui background-color

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

这是一个JavaScript object。
这是材质ui+ css，材质ui的规则我必须写backgroundColor而不是background-color

【解决方案3】：

我不是 100% 确定这将如何转换为 CSS，但在 CSS 规则中，参数名称是“background-color”，而不是 JS 等效的“backgroundColor”

【讨论】：

我编辑我的标签@Johannes