如何找到修改Material UI TextField默认非聚焦悬停边框颜色的主题配置项

你需要修改的未触发悬停、聚焦状态的默认边框，对应不同TextField变体的主题配置项如下：

• 常用outlined（带轮廓线）变体：修改MuiOutlinedInput组件的样式覆盖规则，示例配置如下：

const theme = createTheme({
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          // 非交互默认状态边框色
          '& .MuiOutlinedInput-notchedOutline': {
            borderColor: '自定义色值，比如#aaa'
          }
        }
      }
    }
  }
})

• 若使用filled（填充式）变体，将上述配置中的MuiOutlinedInput替换为MuiFilledInput，边框属性调整为borderBottom即可
• 若使用standard（标准下划线）变体，将上述配置中的MuiOutlinedInput替换为MuiInput，边框属性调整为borderBottom即可

如果需要同时兼容所有变体，可在主题中同时写入三种组件的配置规则。

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