如何自定义Material UI Select组件首个MenuItem默认背景色

问题原因 #

打开Select下拉菜单时，首个MenuItem会自动获得焦点，这是Material UI的默认行为，对应的背景色来自MuiMenuItem-root.Mui-focused样式类。但右键检查元素时，焦点会从MenuItem转移到DevTools，导致聚焦状态消失，背景色也就看不到了。

解决方案 #

方法1：直接给首个MenuItem添加聚焦状态样式 #

通过sx属性针对首个MenuItem的Mui-focused状态自定义背景色：

import * as React from 'react';
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select, { SelectChangeEvent } from '@mui/material/Select';

export default function BasicSelect() {
  const [age, setAge] = React.useState('');

  const handleChange = (event: SelectChangeEvent) => {
    setAge(event.target.value as string);
  };

  return (
    <Box sx={{ minWidth: 120 }}>
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          label="Age"
          onChange={handleChange}
        >
          {/* 给首个MenuItem自定义聚焦背景色 */}
          <MenuItem 
            value={10} 
            sx={{ 
              '&.Mui-focused': { 
                backgroundColor: '#e3f2fd', // 自定义背景色
                '&:hover': { backgroundColor: '#bbdefb' } // 可同时自定义hover状态
              } 
            }}
          >
            Ten
          </MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </Box>
  );
}

方法2：使用Styled组件全局自定义首个MenuItem样式 #

如果需要多个Select组件都生效，可以用styled创建自定义MenuItem组件：

import { styled } from '@mui/material/styles';
import MenuItem from '@mui/material/MenuItem';

const FirstMenuItem = styled(MenuItem)(({ theme }) => ({
  '&.Mui-focused': {
    backgroundColor: theme.palette.primary.light,
    color: theme.palette.primary.dark,
  },
}));

// 使用时替换首个MenuItem
<FirstMenuItem value={10}>Ten</FirstMenuItem>

方法3：通过主题全局覆盖 #

在Material UI主题中修改MenuItem的聚焦样式，针对下拉菜单的第一个子元素：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiMenuItem: {
      styleOverrides: {
        root: {
          '&:first-of-type.Mui-focused': {
            backgroundColor: '#f5f5f5',
          },
        },
      },
    },
  },
});

// 包裹你的应用
<ThemeProvider theme={theme}>
  <BasicSelect />
</ThemeProvider>

调试技巧：捕获瞬间消失的样式 #

如果需要查看这类动态状态的样式，可以用Chrome DevTools的暂停功能：

• 打开Select下拉菜单，看到首个MenuItem的背景色
• 按下F8（或点击DevTools的暂停按钮）暂停脚本执行
• 此时焦点不会转移，右键检查元素就能看到Mui-focused类对应的样式了

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