我在更改MUI的选择背景色时遇到了问题。我尝试了多种解决方案。我尝试过从<Select/> className属性更改它，但没有效果。从菜单属性设置它也没有效果。我认为可能是我的主题导致了这个问题。

我的选择组件

<Select
              variant="standard"
              id={id}
              native={true}
              className={classes.select}
              MenuProps={{
                sx: {
                  maxHeight: 200,
                },
                classes: {
                  paper: classes.paper,
                },
              }}
              inputProps={{
                classes: {
                  root: classes.root,
                },
              }}
              sx={{
                border: errors.installments
                  ? "1px solid rgba(255, 0,0,0.5)"
                  : "1px solid rgba(0, 0, 0, 0.1)",
                borderRadius: 1,
              }}
              disabled={installments ?  false : true}
              {...field}
            ></Select>

样式表

export default makeStyles({
  form: {
    minWidth: 280,
    maxWidth: "45%",
    backgroundColor: "rgba(255, 255, 255, 0.1)",
    borderColor: "rgba(255, 255, 255, 0.4)",
    borderRadius: 1,
  },
  select: {
    padding: 10,
    "&:before": {
      borderColor: "white",
      borderRadius: 5,
      content: "''",
    },
    "&:after": {
      borderColor: "rgba(255, 255, 255, 0.7)",
      borderRadius: 5,
    },
    "&:not(.Mui-disabled):hover::before": {
      borderColor: "white",
      borderRadius: 5,
    },
    '&:focus':{
      backgroundColor: 'red'
    }
  },
  root: {
    color: "white",
    borderRadius: 1,
  },
  paper: {
    position: "absolute",
    overflowY: "auto",
    overflowX: "hidden",
    // So we see the popover when it's empty.
    // It's most likely on issue on userland.
    maxHeight: 200,
  },
});

在主题上定义的调色板

palette: {
    mode: "light",
    primary: {
      main: "#0f9688",
    },
    secondary: {
      main: "#D96098",
    },
    info: {
      main: "#007668",
    },
    background: {
      paper: "#0f9688",
      default: "ffffff",
    },
  },

MuiSelect with green background