如何移除Material UI Select组件的边框或外轮廓？

方案1：单组件局部修改（推荐） #

直接在Select组件上通过sx属性覆盖样式即可，对默认、悬浮、聚焦全状态生效：

import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';

function CustomSelect() {
  return (
    <Select
      defaultValue="option1"
      sx={{
        // 移除所有状态下的边框
        '& .MuiOutlinedInput-notchedOutline': {
          border: 0,
        },
        // 可选：移除聚焦状态的默认外轮廓
        '&.Mui-focused': {
          outline: 'none',
        }
      }}
    >
      <MenuItem value="option1">选项1</MenuItem>
      <MenuItem value="option2">选项2</MenuItem>
    </Select>
  );
}

方案2：全局统一修改 #

如果需要全站所有Select组件默认无外边框，可以通过自定义主题全局覆盖样式：

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

const customTheme = createTheme({
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        notchedOutline: {
          border: 'none',
        },
        root: {
          '&.Mui-focused': {
            outline: 'none',
          }
        }
      }
    }
  }
});

// 根组件用ThemeProvider包裹即可
// <ThemeProvider theme={customTheme}><App /></ThemeProvider>

不同变种适配说明 #

如果使用的不是默认的outlined变种，对应调整样式目标即可：

• variant="filled"：覆盖.MuiFilledInput-root的borderBottom属性为none
• variant="standard"：覆盖.MuiInput-root的borderBottom属性为none

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