如何通过Material-UI的sx属性正确设置Button组件背景色？

你之前的问题出在没必要嵌套额外的类选择器，而且选择器的写法也不对。用sx属性时，样式直接作用于Button组件的根元素，不需要再通过MuiButtonBase-root-MuiButton-root来定位，直接写属性就能覆盖默认样式。

基础写法（直接覆盖默认背景色） #

<Button
  className="font-semibold"
  sx={{
    boxShadow: "none",
    color: "#4a92fe",
    border: "2px solid #eaecf0",
    backgroundColor: "red", // 直接设置背景色
  }}
  variant="contained"
  fullWidth
  onClick={onClickApplyHandler}
>
  Aplicar
</Button>

覆盖不同状态的背景色（比如hover、active） #

如果需要给按钮的hover、点击等状态单独设置背景色，用伪类结合&（指向当前组件）即可：

<Button
  className="font-semibold"
  sx={{
    boxShadow: "none",
    color: "#4a92fe",
    border: "2px solid #eaecf0",
    backgroundColor: "red",
    // hover状态的背景色
    "&:hover": {
      backgroundColor: "#cc0000",
      boxShadow: "none", // 同时去掉hover时的默认阴影
    },
    // 点击激活状态的背景色
    "&:active": {
      backgroundColor: "#990000",
    }
  }}
  variant="contained"
  fullWidth
  onClick={onClickApplyHandler}
>
  Aplicar
</Button>

为什么之前的写法失效？ #

你写的& MuiButtonBase-root-MuiButton-root是错误的选择器语法——类选择器前面需要加.，而且这个类本身就是Button的根类，sx已经作用在这个元素上了，完全没必要额外嵌套，直接写样式属性的优先级足够覆盖默认样式。

内容的提问来源于stack exchange，提问作者MiguelG