Material-UI Select下拉选项颜色修改与选中状态异常问题

修改下拉选项颜色分两种场景，对应不同的样式配置方式：

1. 修改未选中选项的颜色
   通过makeStyles定义样式类，直接应用到MenuItem上：

const useStyles = makeStyles((theme) => ({
  select: {
    backgroundColor: "black", // 未选中时的背景色
    color: "white" // 未选中时的文字颜色
  },
  // 其他样式
}));

渲染MenuItem时绑定该类：

<MenuItem className={classes.select} value={option.value}>
  {option.value}
</MenuItem>

2. 修改选中选项的颜色
   通过Select的MenuProps给下拉容器添加样式，针对.Mui-selected类配置选中状态样式：

const useStyles = makeStyles((theme) => ({
  menuItem: {
    "& .Mui-selected": {
      backgroundColor: "red", // 选中时的背景色
      color: "white" // 选中时的文字颜色
    }
  },
  // 其他样式
}));

在Select组件中配置该样式：

<Select
  MenuProps={{
    classes: {
      paper: classes.menuItem
    },
    // 其他MenuProps配置
  }}
  // 其他Select属性
>

异常原因 #

当前代码里的Select组件未绑定value属性，导致组件内部状态无法同步我们通过按钮修改的value变量。手动更新state后，Select仍保留之前用户选中项的Mui-selected标记，从而出现样式不匹配的问题。

解决思路 #

给Select组件添加value属性，绑定状态变量value，让Select根据当前状态自动更新选中项的样式标记。

修改后的完整代码 #

import React, { useState } from "react";
import {
  MenuItem,
  makeStyles,
  Select,
  Button,
  FormControl,
  Box
} from "@material-ui/core";

const useStyles = makeStyles((theme) => ({
  select: {
    backgroundColor: "black",
    color: "white"
  },
  menuItem: {
    "& .Mui-selected": {
      backgroundColor: "red",
      color: "white"
    }
  }
}));

export default function SimpleSelect() {
  const classes = useStyles();
  const [value, setValue] = useState("");

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const handleButtonClick = () => {
    setValue("Option 1");
  };

  const data = [
    { value: "Option 1" },
    { value: "Option 2" },
    { value: "Option 3" }
  ];

  return (
    <div>
      <Box>
        <FormControl style={{ display: "flex", flexDirection: "row" }}>
          <Select
            value={value} {/* 新增：绑定value属性 */}
            MenuProps={{
              classes: {
                paper: classes.menuItem
              },
              anchorOrigin: {
                vertical: "bottom",
                horizontal: "left"
              },
              transformOrigin: {
                vertical: "top",
                horizontal: "left"
              },
              getContentAnchorEl: null
            }}
            renderValue={() => <div>{value ? value : "Polygon"}</div>}
            onChange={handleChange}
          >
            <MenuItem value="" style={{ marginTop: "1px" }}>
              <em>(No Selection)</em>
            </MenuItem>

            {data.map((option) => {
              return (
                <MenuItem className={classes.select} value={option.value}>
                  {option.value}
                </MenuItem>
              );
            })}
          </Select>
          <Button onClick={handleButtonClick}>Option</Button>
        </FormControl>
      </Box>
    </div>
  );
}

添加value={value}后，Select会始终匹配当前状态值对应的MenuItem，自动维护.Mui-selected类的添加与移除，解决样式不同步的问题。

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