如何自定义Material UI Select组件下拉菜单的边框与圆角样式？

嘿，这个问题我之前折腾Select组件的时候也碰到过！确实因为Select的下拉菜单（也就是内部用Menu组件渲染的Paper容器）是脱离当前组件DOM流、绝对定位在页面上的，所以直接给Select加样式根本碰不到它。别慌，给你几种亲测有效的解决方法：

方法1：通过MenuProps传递PaperProps自定义样式（官方推荐） #

这是Material UI官方最推荐的方式，直接在Select组件上配置MenuProps，穿透到内部的Paper组件设置样式，精准又安全：

import { useState } from 'react';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';

export default function CustomSelect() {
  const [selectedValue, setSelectedValue] = useState('');

  return (
    <Select
      value={selectedValue}
      onChange={(e) => setSelectedValue(e.target.value)}
      placeholder="选择选项"
      // 核心配置在这里
      MenuProps={{
        PaperProps: {
          sx: {
            borderRadius: '8px', // 自定义圆角大小
            border: '1px solid #e0e0e0', // 自定义边框样式
            boxShadow: '0 3px 6px rgba(0,0,0,0.08)', // 可选：添加轻微阴影增强层次感
            // 还可以根据需求调整内边距、背景色等
            padding: '4px 0',
            backgroundColor: '#fff',
          },
        },
      }}
    >
      <MenuItem value="option1">选项1</MenuItem>
      <MenuItem value="option2">选项2</MenuItem>
      <MenuItem value="option3">选项3</MenuItem>
    </Select>
  );
}

原理很简单：Select的下拉菜单本质是由Menu组件负责渲染的，而Menu的容器就是Paper组件，通过MenuProps.PaperProps.sx可以直接把样式传递给这个外层容器，完美绕过定位的问题。

方法2：用styled组件封装可复用的自定义Select #

如果你需要在多个地方用到这个样式的Select，用Material UI的styled工具封装一下会更方便：

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

// 封装自定义样式的Select组件
const CustomStyledSelect = styled(Select)(({ theme }) => ({
  // 这里可以保留你已经自定义好的输入框样式
  '& .MuiOutlinedInput-root': {
    borderRadius: '8px',
    borderColor: '#e0e0e0',
  },
  // 直接通过类名选择下拉菜单的Paper容器
  '& .MuiMenu-paper': {
    borderRadius: '8px',
    border: '1px solid #e0e0e0',
    boxShadow: theme.shadows[2],
  },
}));

// 使用示例
export default function ReusableSelect() {
  const [selectedValue, setSelectedValue] = useState('');
  return (
    <CustomStyledSelect
      value={selectedValue}
      onChange={(e) => setSelectedValue(e.target.value)}
    >
      <MenuItem value="option1">选项1</MenuItem>
      <MenuItem value="option2">选项2</MenuItem>
    </CustomStyledSelect>
  );
}

注意：这种方式依赖Material UI的内置类名，虽然官方的类名稳定性很高，但如果是跨大版本升级可能需要微调，不过日常使用完全没问题。

方法3：全局样式覆盖（仅适合全项目统一修改） #

如果你想让所有Select的下拉菜单都用这套样式，可以在全局主题里配置，一劳永逸：

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

// 自定义主题
const customTheme = createTheme({
  components: {
    MuiMenu: {
      styleOverrides: {
        paper: {
          borderRadius: '8px',
          border: '1px solid #e0e0e0',
          boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
        },
      },
    },
  },
});

// 把整个应用包裹在ThemeProvider里
function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <Select value="" onChange={() => {}}>
        <MenuItem value="option1">选项1</MenuItem>
      </Select>
    </ThemeProvider>
  );
}

不过要注意，这种方式会影响所有的Menu组件（不止Select的下拉菜单），所以如果只是个别Select需要自定义，还是前两种方法更灵活。

另外补充一下：如果你用的是Material UI v4，语法会稍微有点不同（比如用makeStyles代替sx），但核心思路都是找到下拉菜单对应的Paper组件来修改样式，本质是一样的~

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