如何通过全局主题覆盖重写MaterialUI OutlinedInput并修复双边框问题

出现双层边框的根本原因是：MUI 的 OutlinedInput 组件默认边框是渲染在内部 notchedOutline 对应的 <fieldset> 子节点上的，你直接给 root 根节点新增 border 样式，两个边框叠加就会出现双层显示效果。

修复方案1：覆盖默认边框节点样式（推荐） #

直接针对内置的 <fieldset> 节点做样式修改，完全适配 MUI 自带的 Label 缺口逻辑，不会出现样式异常，配置如下：

MuiOutlinedInput: {
  styleOverrides: {
    root: {
      borderRadius: "4px",
    },
    notchedOutline: {
      borderColor: "green",
      borderWidth: "1px"
    },
    hover: {
      "& .MuiOutlinedInput-notchedOutline": {
        borderColor: "red",
        borderWidth: "1px"
      }
    },
    disabled: {
      "& .MuiOutlinedInput-notchedOutline": {
        borderColor: "black",
        borderWidth: "1px"
      }
    },
    focused: {
      "& .MuiOutlinedInput-notchedOutline": {
        borderColor: "blue",
        borderWidth: "2px"
      }
    }
  }
}

修复方案2：隐藏默认边框，保留原有root样式写法 #

如果你不想调整现有样式的写法逻辑，可以新增一行样式隐藏默认的 <fieldset> 边框即可：

MuiOutlinedInput: {
  styleOverrides: {
    root: {
      borderRadius: "4px",
      border: "1px solid green",
      "&:hover": { borderRadius: "4px", border: "1px solid red" },
      "&:disabled": { borderRadius: "4px", border: "1px solid black" },
      "&.Mui-focused": { borderRadius: "4px", border: "2px solid blue" },
      // 新增以下样式隐藏默认边框
      "& .MuiOutlinedInput-notchedOutline": {
        border: "none"
      }
    },
  },
}

注意：方案2仅适合没有配置关联Label的输入框使用，如果输入框绑定了Label属性，会导致Label周边的缺口样式异常，优先选择方案1。

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