React+MUI表单TextField出现双层边框问题求助

• 组件嵌套导致边框重复定义
  TextField内部默认封装了Input（或OutlinedInput）组件，如果你同时给TextField本身和内部的输入元素都设置了border样式，就会出现双层边框。比如既在TextField的sx属性里加了border: 1px solid #ddd，又通过InputProps给内层input元素也加了border，两层边框叠加就会显示成双层。

• 主题全局配置与组件本地样式冲突
  如果你在MUI主题（createTheme）中给OutlinedInput或TextField设置了全局边框样式，同时又在组件实例上通过sx、自定义className添加了边框样式，两者会叠加生效。比如主题里给OutlinedInput默认设置了borderColor: 'rgba(0,0,0,0.23)'，你又给组件加了border: 1px solid #000，就会出现两层边框的视觉效果。

• 把默认轮廓（outline）当成内层边框
  OutlinedInput组件在默认或聚焦状态下，自带outline或原生border样式。很多时候你以为的“内层边框”其实是组件的默认轮廓，而你自己给TextField加了外层边框，两者重叠后看起来像双层。比如OutlinedInput默认的border样式没有被完全覆盖，和你自定义的边框同时显示。

• CSS优先级不足导致默认边框未被覆盖
  MUI组件的默认样式是通过CSS-in-JS生成的，拥有较高的优先级。如果你的自定义样式优先级不够（比如用普通className而不是sx、styled），就无法完全覆盖组件的默认边框，导致默认边框保留，同时你的自定义边框又叠加上去，形成双层。

举个典型的错误写法示例：

// 错误：同时给TextField和内层input设置边框
<TextField
  sx={{ border: '1px solid #ccc', borderRadius: 2 }}
  InputProps={{
    sx: {
      '& input': { border: '1px solid #999', borderRadius: 2 }
    }
  }}
  variant="outlined"
/>

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