如何自定义Material UI组件？以移除Select蓝色轮廓及进阶需求为例

问题背景 #

我刚开始开发React应用，选用Material UI预构建组件，但在样式自定义上遇到困难，以下是我的Dropdown组件代码：

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

const Dropdown = ({ value, label, options, handleChange }) => {

    return (
        <FormControl
            className="dropdown-container"
            variant='outlined'
            sx={{
                minWidth: 120,
                backgroundColor: "#eb6060",
                borderRadius: "5px",
                border: "1px solid #eb6060",
            }}
        >
            <InputLabel shrink={false}>{value === "" ? label : ""}</InputLabel>
            <Select
                onChange={handleChange}
                label={value === "" ? label : ""}
                value={value}
                notched={false}
            >
                {options.map((option) => (
                    <MenuItem
                        key={option.code}
                        value={option.code}
                    >
                        {option.alias}
                    </MenuItem>
                ))}
            </Select>
        </FormControl>
    );
};

export default Dropdown;

我尝试移除收缩标签和Select组件边框缺口后，有以下疑问和后续需求：

初始疑问 #

• 当前的自定义方式是否正确？
• 如何移除点击下拉组件时的蓝色聚焦轮廓，以及第一个MenuItem的键盘聚焦高亮？

后续需求 #

• 移除Select组件标签的蓝色高亮；
• 移除菜单打开时第一个菜单项的灰色高亮；
• 打开菜单时稍微加深Select按钮的背景色。

另外，我希望能自行解决这类问题，不用每次求助，但用CSS overview尝试修改标签高亮没成功，请问怎么查找需要覆盖的样式类？

解决方案 #

1. 初始自定义方式的正确性判断 #

你当前通过sx属性自定义FormControl样式的方式符合Material UI规范，但有两点可优化：

• 因为设置了variant='outlined'，FormControl本身带默认边框，直接设置border: "1px solid #eb6060"会叠加，建议通过覆盖OutlinedInput的边框样式统一，不过当前写法也能生效；
• 标签显示逻辑可简化，无需手动控制shrink和内容，Material UI的Select会根据value自动管理标签状态，去掉shrink={false}和条件渲染，直接写<InputLabel>{label}</InputLabel>，Select的label属性设为label即可。

2. 具体样式修改实现 #

修改后的组件代码已整合所有需求：

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

// 自定义Select组件，覆盖相关样式
const StyledSelect = styled(Select)(({ theme }) => ({
  // 移除聚焦时的蓝色轮廓
  '&:focus': {
    outline: 'none',
  },
  // 移除标签的蓝色高亮
  '& .MuiInputLabel-root.Mui-focused': {
    color: '#000', // 改为你需要的颜色，比如和原标签一致
  },
  // 菜单打开时加深背景色
  '&.Mui-expanded': {
    backgroundColor: '#d9534f', // 比原背景色深一点的红色
  },
  // 移除Select内部输入框的聚焦边框
  '& .MuiOutlinedInput-notchedOutline': {
    border: 'none',
  },
  '&:hover .MuiOutlinedInput-notchedOutline': {
    border: 'none',
  },
  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
    border: 'none',
  },
}));

// 自定义MenuItem，移除默认高亮
const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
  '&.Mui-selected, &.Mui-selected:hover': {
    backgroundColor: 'transparent', // 移除选中高亮
    color: '#000',
  },
  '&:hover': {
    backgroundColor: 'transparent', // 移除hover高亮
  },
  // 移除键盘聚焦时的灰色高亮
  '&.Mui-focusVisible': {
    backgroundColor: 'transparent',
    outline: 'none',
  },
}));

const Dropdown = ({ value, label, options, handleChange }) => {
    return (
        <FormControl
            className="dropdown-container"
            variant='outlined'
            sx={{
                minWidth: 120,
                backgroundColor: "#eb6060",
                borderRadius: "5px",
                border: "1px solid #eb6060",
            }}
        >
            <InputLabel>{label}</InputLabel>
            <StyledSelect
                onChange={handleChange}
                label={label}
                value={value}
                notched={false}
            >
                {options.map((option) => (
                    <StyledMenuItem
                        key={option.code}
                        value={option.code}
                    >
                        {option.alias}
                    </StyledMenuItem>
                ))}
            </StyledSelect>
        </FormControl>
    );
};

export default Dropdown;

3. 自行查找需要覆盖的样式类的方法 #

直接用浏览器开发者工具就能搞定，步骤如下：

• 右键点击要修改的元素（比如标签、下拉按钮、菜单项），选择「检查」；
• 在Elements面板中，找到对应元素的Material UI生成类名（比如MuiInputLabel-root、Mui-focused）；
• 查看Styles面板中这些类的CSS规则，定位要修改的属性（比如color、background-color）；
• 在组件中通过sx属性或styled组件，用类选择器（比如& .MuiInputLabel-root.Mui-focused）覆盖规则；
• 注意优先级：若样式未生效，可增加选择器特异性（多嵌套一层父组件类），尽量避免使用!important。

举个例子，查找标签蓝色高亮类：

1. 点击下拉组件，让标签处于聚焦状态；
2. 检查标签元素，会看到它带有MuiInputLabel-root、Mui-focused两个类；
3. Styles面板中会显示.MuiInputLabel-root.Mui-focused设置了color: #2196f3（蓝色）；
4. 在Select的样式中写& .MuiInputLabel-root.Mui-focused { color: #000; }即可覆盖。

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