如何自定义 Material UI 组件（例如删除 Select 组件上的蓝色轮廓）？

Question

我刚刚开始开发 React 应用程序，并决定尝试使用 Material UI 的预构建组件。

但是，我一直很难弄清楚如何正确自定义组件及其样式。

我的代码：

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;

这是我迄今为止尝试自定义 MUI 的 Select 组件的尝试。我尝试删除每个选择组件边框上出现的收缩标签和凹口。

1. 我是否以正确的方式进行了自定义？

2. 如何进一步自定义它以删除单击下拉组件时出现的蓝色焦点轮廓以及第一个菜单项上的键盘焦点突出显示？

编辑： 添加 Prem Chaudhary 给出的代码已删除蓝色轮廓。这就是现在的样子：

我应该如何自己找出这样的解决方案？比如我还想对这个组件做如下修改：

1. 删除选择组件标签上的蓝色突出显示
2. 菜单打开时删除第一个菜单项上的灰色突出显示
3. 打开菜单时将选择按钮的背景稍微变暗

理想情况下，我能够自己找到所有这些问题的解决方案，而不必每次都询问堆栈溢出。如何找到要覆盖哪些类的样式？我尝试过使用 CSS 概述来实现 #1，但无法做出我想要的更改：

Answer 1

要实现所需的自定义，可以进行以下修改：

调整

MuiOutlinedInput-notchedOutline

的

FormControl

样式：

sx={{
  minWidth: 120,
  backgroundColor: "#eb6060",
  borderRadius: "5px",
  border: "1px solid #eb6060",
  '& .MuiOutlinedInput-notchedOutline': {
       border: 'none',
   },
   '&:hover .MuiOutlinedInput-notchedOutline': {
       border: 'none',
   },
   '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
       border: 'none',
   },
}}

此处，

MuiOutlinedInput-notchedOutline

的

FormControl

样式已调整为在未聚焦、悬停或聚焦于内容时删除轮廓边框。

编辑：当您遇到问题或想要满足特定要求时，可以按照以下方法操作：

方法 1：文档探索 解决问题最可靠的方法之一是彻底检查所使用的库或框架提供的文档。尽管这种方法可能需要一些时间和精力，但它被认为是最好的行动方案。此外，依赖官方文档可确保我们的代码在未来出现任何复杂情况时得到库维护者的支持。

方法2：浏览器检查器工具的利用 快速方法是使用浏览器检查器工具来检查元素的结构和应用于它的 CSS。通过检查元素，您可以查看您的 CSS 是否应用于元素或被其他 CSS 覆盖。

例如，在这里您可以在浏览器检查器中看到解决您的第一个问题的 CSS。

您后续问题的解决方案：

调整

FormControl

的样式：

sx={{ minWidth: 120,
    backgroundColor: "#eb6060",
    borderRadius: "5px",
    border: "1px solid #eb6060",
    '& .MuiOutlinedInput-notchedOutline': {
        border: 'none',
    },
    '&:hover .MuiOutlinedInput-notchedOutline': {
        border: 'none',
    },
    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
        border: 'none',
    },
    '& .MuiSelect-select': {
        color: '#FFF' // remove the blue highlight on select component label
    },
    '& .Mui-focused .MuiSelect-select': {
        backgroundColor: '#e84545' // Slightly darken the select button's background when menu is opened
    }
}}

调整

MenuItem

的样式：

sx={{ 
    '&.Mui-selected.Mui-focusVisible': {
        backgroundColor: '#FFF' //Set the highlight color to white on the first menu item when the menu opens
    }
}}

Answer 2

抱歉，我来这里是为了获得与您提供的相同答案。作为一个新手，我会发表评论，我还没有达到 50 个声誉。

在删除默认的蓝色轮廓和表单控件上的悬停（无论如何，它工作得很好 - 感谢这一点）时，我遇到了另一个问题。 我的标签应该位于文本字段的顶部边框内，现在与顶部边框线重叠（该线在标签文本上交叉）。我尝试了很多方法来解决这个问题，但没有成功。 我已附上图片供您参考。请问我该如何解决这个问题？ 错误图像（边界线越过标签）