如何通过ThemeProvider自定义MUI Select组件的边框属性？

问题核心原因 #

Outlined变体的Select组件，其边框样式并非由MuiSelect的root类或MuiOutlinedInput的root类控制，而是由MuiOutlinedInput下的notchedOutline子元素负责渲染边框。此外，单独设置border（仅指定宽度）和borderColor不会生效，因为CSS要求边框样式必须显式声明（如solid）。

修改后的theme.js代码 #

import { createTheme } from "@mui/material";

const darkGrey = "#262626";
const mediumGrey = "#595959";
const lightGrey = "#adadad";
const white = "#ffffff";
const limeGreen = "#3df730"; // 补全颜色值的#前缀

const theme = createTheme({
  components: {
    MuiSelect: {
      styleOverrides: {
        root: {
          backgroundColor: mediumGrey,
        },
      },
    },
    MuiOutlinedInput: {
      styleOverrides: {
        // 控制默认状态下的边框
        notchedOutline: {
          // 完整的边框声明：宽度+样式+颜色
          border: "4px solid red",
          // 也可以分开设置：
          // borderWidth: "4px",
          // borderStyle: "solid",
          // borderColor: "red",
        },
        // 可选：修改聚焦状态下的边框颜色
        focused: {
          "& .MuiOutlinedInput-notchedOutline": {
            borderColor: limeGreen,
          },
        },
      },
    },
    MuiInputLabel: {
      styleOverrides: {
        root: {
          color: white,
        },
      },
    },
  },
});

export default theme;

关键说明 #

1. 目标类选择正确：必须针对MuiOutlinedInput的notchedOutline类设置边框，而非root类。
2. 边框样式完整：CSS边框属性需要同时指定宽度、样式（如solid）和颜色，缺少任何一个都不会显示预期效果。
3. 颜色值修正：原代码中limeGreen缺少#前缀，会导致颜色不生效，需补全。

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