React JS：移除MUI Select组件点击后的边框

要去掉MUI Select点击时出现的蓝色边框，核心是覆盖组件focus状态下的内部元素样式，以下是几种实用方案：

方案一：直接用sx属性定制（组件级） #

在Select组件上通过sx属性精准覆盖focus状态的样式，不会影响其他组件：

<Select
  sx={{
    '& .MuiOutlinedInput-root': {
      // 覆盖focus时的边框样式
      '&:focus-within .MuiOutlinedInput-notchedOutline': {
        borderColor: 'transparent', // 设为透明或和背景色一致
        boxShadow: 'none',
      },
      // 移除focus时的默认outline
      '&:focus-visible': {
        outline: 'none',
      },
    },
  }}
  variant="outlined"
  // 其他属性（比如value、onChange等）
>
  {/* 你的选项列表 */}
</Select>

方案二：用styled组件封装（复用性高） #

如果需要多个地方使用无蓝色边框的Select，可以封装成自定义组件：

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

const CustomBorderlessSelect = styled(Select)(({ theme }) => ({
  '& .MuiOutlinedInput-root': {
    '&:focus-within .MuiOutlinedInput-notchedOutline': {
      borderColor: 'transparent',
      boxShadow: 'none',
    },
    '&:focus-visible': {
      outline: 'none',
    },
  },
}));

// 使用示例
<CustomBorderlessSelect variant="outlined">
  {/* 选项 */}
</CustomBorderlessSelect>

方案三：全局主题配置（全应用生效） #

如果希望所有Select都移除这个蓝色边框，可以在MUI主题里全局配置：

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

const theme = createTheme({
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          '&:focus-within .MuiOutlinedInput-notchedOutline': {
            borderColor: 'transparent',
            boxShadow: 'none',
          },
          '&:focus-visible': {
            outline: 'none',
          },
        },
      },
    },
  },
});

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

注意点 #

• 之前样式没生效，是因为MUI内部对focus状态的样式优先级更高，需要用&:focus-within这种更具体的选择器来覆盖；
• 如果你的Select不是outlined变体，需要对应调整选择器（比如针对filled或standard变体的类名）。

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