如何修改MUI Select组件点击边框色及选中菜单项背景色

直接按以下方式调整代码即可覆盖两个样式需求： #

1. 调整Select点击/聚焦打开时的边框颜色 #

MUI outlined 变体的Select，聚焦态边框由内部类名MuiOutlinedInput-notchedOutline控制，聚焦状态会给Select根节点加Mui-focused类名，直接在原有样式中追加对应规则即可。

2. 调整下拉列表当前选中项的背景色 #

下拉弹层默认通过Portal挂载到DOM根节点，无法直接通过Select根节点的sx透传样式，需要通过MenuProps配置弹层属性；选中状态的MenuItem会自带Mui-selected类名，针对该类名设置背景色即可。 #

完整可直接复用的代码 #

样式文件（SelectMenuItemsPerPageStyles.js）

export const styles = {
  Select: {
    // 保留你原有写的Select样式，追加以下聚焦边框规则
    "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
      borderColor: "#1677ff", // 替换成你需要的边框色值
      borderWidth: 1
    }
  },
  // 下拉弹层样式
  selectMenuProps: {
    PaperProps: {
      sx: {
        borderRadius: 6, // 按需调整下拉弹层圆角，不需要可以删掉
        "& .MuiMenuItem-root.Mui-selected": {
          backgroundColor: "#e6f4ff", // 替换成你需要的选中项背景色
          // 可选：配置选中项hover时的背景色
          "&:hover": {
            backgroundColor: "#bae0ff"
          }
        }
      }
    }
  }
}

组件文件（SelectMenuItemsPerPage.jsx）

import React from 'react';
import { MenuItem, Select } from "@mui/material";
import { styles } from './SelectMenuItemsPerPageStyles';

export default function SelectMenuItemsPerPage({ pageSize, setPageSize }) {
    const handleChange = (event) => {
        setPageSize(Number(event.target.value));
    };

    return (
        <Select
            value={pageSize}
            onChange={handleChange}
            sx={styles.Select}
            MenuProps={styles.selectMenuProps}
        >
            <MenuItem value={5}>5</MenuItem>
            <MenuItem value={10}>10</MenuItem>
            <MenuItem value={25}>25</MenuItem>
            <MenuItem value={50}>50</MenuItem>
            <MenuItem value={100}>100</MenuItem>
        </Select>
    );
}

补充说明 #

• 如果你用的是filled或者standard变体的Select，只需要把聚焦边框的选择器替换成对应变体的类名即可，核心逻辑是通过Mui-focused状态类控制激活态样式
• 上述统一在MenuProps里配置MenuItem样式的写法，不需要给每个MenuItem单独加sx属性，维护成本更低

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