如何为MUI Select下拉框自定义样式且不影响其他MUI组件？

你可以通过以下几种精准定位的方式，只给Select的下拉面板设置样式，不会影响其他使用MuiList的组件：

方法1：给Select的下拉菜单绑定自定义类 #

利用Select的MenuProps给下拉菜单的Paper组件指定自定义样式组件，通过层级选择器只作用于内部的List：

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

// 定义仅作用于Select下拉菜单的样式容器
const CustomSelectMenu = styled('div')(() => ({
  '& .MuiList-root': {
    backgroundColor: 'var(--main-color)',
    color: 'var(--text-color-light)',
    border: 'none',

    '& .Mui-selected': {
      backgroundColor: '#dddddd !important',
      color: 'var(--primary-color-hover) !important',
      borderBottom: '1px solid #26586B',
      '&:hover': {
        backgroundColor: 'var(--main-color) !important',
        color: 'var(--primary-color-hover) !important',
      },
    },
  },
}));

// 在Select中使用自定义菜单容器
<Select
  MenuProps={{
    PaperProps: {
      component: CustomSelectMenu,
    },
  }}
>
  <MenuItem value="1">选项1</MenuItem>
  <MenuItem value="2">选项2</MenuItem>
</Select>

方法2：在主题中精准定位Select关联的List #

MUI会给Select的下拉List自动添加MuiSelect-listbox类名，你可以在主题覆盖中通过这个类名精准匹配：

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

const theme = createTheme({
  components: {
    MuiList: {
      styleOverrides: {
        root: {
          // 只匹配Select下拉菜单里的List
          '&.MuiSelect-listbox': {
            backgroundColor: 'var(--main-color)',
            color: 'var(--text-color-light)',
            border: 'none',

            '& .Mui-selected': {
              backgroundColor: '#dddddd !important',
              color: 'var(--primary-color-hover) !important',
              borderBottom: '1px solid #26586B',
              '&:hover': {
                backgroundColor: 'var(--main-color) !important',
                color: 'var(--primary-color-hover) !important',
              },
            },
          },
        },
      },
    },
  },
});

// 用ThemeProvider包裹应用生效
<ThemeProvider theme={theme}>
  {/* 你的应用内容 */}
</ThemeProvider>

方法3：直接用sx属性给单个Select设置样式 #

如果只是个别Select需要自定义样式，直接通过sx属性内联样式更高效：

<Select
  sx={{
    // 直接定位Select的下拉列表容器
    '& .MuiSelect-listbox': {
      backgroundColor: 'var(--main-color)',
      color: 'var(--text-color-light)',
      border: 'none',

      '& .Mui-selected': {
        backgroundColor: '#dddddd !important',
        color: 'var(--primary-color-hover) !important',
        borderBottom: '1px solid #26586B',
        '&:hover': {
          backgroundColor: 'var(--main-color) !important',
          color: 'var(--primary-color-hover) !important',
        },
      },
    },
  }}
>
  <MenuItem value="1">选项1</MenuItem>
  <MenuItem value="2">选项2</MenuItem>
</Select>

以上三种方法都是通过CSS类名的层级或专属类来精准定位Select的下拉面板，不会影响表格显示/隐藏列面板等其他使用MuiList的组件。

内容的提问来源于stack exchange，提问作者Máté Gulyás