如何更改 MUI 的选择背景颜色？答案

【问题标题】：How do I change MUI's select background color?如何更改 MUI 的选择背景颜色？
【发布时间】：2022-10-22 05:02:20
【问题描述】：

我正在努力改变 MUI 的 Select 背景颜色。我尝试了多种解决方案。我尝试从 <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

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您可以通过执行以下操作修改底层 <MenuList> 样式：

<Select
    inputProps={{
        MenuProps: {
            MenuListProps: {
                sx: {
                    backgroundColor: 'red'
                }
            }
        }
    }}
>

【讨论】：

【解决方案2】：

你可以使用 sx 属性来改变 Select Component 的颜色。

<Select
      sx={{ backgroundColor:'red' }}
      labelId="demo-simple-select-label"
      id="demo-simple-select"
      value={age}
      label="Age"
      onChange={handleChange}
    >

【讨论】：