如何去除MUI Select组件边框并修改聚焦/失焦时标签文本颜色

直接上可落地的代码方案，解决你遇到的两个需求：

1. 定制组件样式（推荐用styled方式） #

通过MUI的styled工具封装自定义的Select和InputLabel组件，一次性搞定样式需求：

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

// 定制Select：移除所有状态下的边框
const CustomSelect = styled(Select)({
  '& .MuiOutlinedInput-notchedOutline': {
    border: 'none', // 默认状态无边框
  },
  '&:hover .MuiOutlinedInput-notchedOutline': {
    border: 'none', // 悬停状态无边框
  },
  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
    border: 'none', // 聚焦状态无边框
  },
});

// 定制InputLabel：修改聚焦/失焦颜色
const CustomInputLabel = styled(InputLabel)({
  color: '#666666', // 失焦时的标签颜色，替换成你要的色值
  '&.Mui-focused': {
    color: '#165DFF', // 聚焦时的标签颜色，替换成你要的色值
  },
});

2. 组件使用示例 #

把定制好的组件按正常方式使用就行：

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

  return (
    <FormControl sx={{ minWidth: 200, margin: 2 }}>
      <CustomInputLabel id="custom-select-label">选择选项</CustomInputLabel>
      <CustomSelect
        labelId="custom-select-label"
        id="custom-select"
        value={selectedValue}
        label="选择选项"
        onChange={(e) => setSelectedValue(e.target.value)}
      >
        <MenuItem value="option1">选项1</MenuItem>
        <MenuItem value="option2">选项2</MenuItem>
        <MenuItem value="option3">选项3</MenuItem>
      </CustomSelect>
    </FormControl>
  );
}

替代方案：内联sx属性定制 #

如果不想单独封装组件，也可以直接用sx属性内联写样式，适合快速调试：

<FormControl sx={{ minWidth: 200, margin: 2 }}>
  <InputLabel
    sx={{
      color: '#666666',
      '&.Mui-focused': { color: '#165DFF' },
    }}
    id="inline-select-label"
  >
    选择选项
  </InputLabel>
  <Select
    sx={{
      '& .MuiOutlinedInput-notchedOutline': { border: 'none' },
      '&:hover .MuiOutlinedInput-notchedOutline': { border: 'none' },
      '&.Mui-focused .MuiOutlinedInput-notchedOutline': { border: 'none' },
    }}
    labelId="inline-select-label"
    id="inline-select"
    value={selectedValue}
    label="选择选项"
    onChange={(e) => setSelectedValue(e.target.value)}
  >
    <MenuItem value="option1">选项1</MenuItem>
    <MenuItem value="option2">选项2</MenuItem>
  </Select>
</FormControl>

注意事项 #

• 色值可以直接替换成你目标效果图里的颜色，比如聚焦时的蓝色、失焦时的灰色
• MUI的内置样式优先级较高，所以必须用嵌套选择器（比如&.Mui-focused）来覆盖默认样式，单独写color会被内置样式覆盖

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