通过Theme覆盖Material UI TextField样式及相关文档查询咨询

样式覆盖代码 #

你需要在主题配置的components字段中新增MuiInput组件的样式覆盖，standard变体的TextField下划线是通过该组件的::before伪元素实现的，修改后完整配置如下：

const lightTheme: ThemeOptions = createTheme({
  palette: {
      primary: {
          main: '#ffffff',
      },
  },
  typography: {
      allVariants: {
          color: 'white'
      },
  },
  components: {
      MuiInputBase: {
          styleOverrides: {
              input: {
                  color: 'white',
              }
          }
      },
      // 新增standard变体输入框下划线配置
      MuiInput: {
          styleOverrides: {
              root: {
                  // 失焦默认状态下的下划线
                  '&:before': {
                      borderBottomColor: 'rgba(255, 255, 255, 0.6)',
                  },
                  // 失焦hover状态下的下划线
                  '&:hover:not(.Mui-disabled):before': {
                      borderBottomColor: 'rgba(255, 255, 255, 0.8)',
                  }
              }
          }
      }
  }
});

你可以根据需求调整borderBottomColor的透明度和色值，如果使用的是outlined/filled变体的TextField，对应修改MuiOutlinedInput/MuiFilledInput的样式即可。

• 每个MUI组件的官方文档页下拉到「CSS」相关章节，会完整列出该组件所有支持全局主题覆盖的插槽名、对应CSS类名以及生效场景，直接参照对应字段配置即可。
• 可通过浏览器开发者工具检查目标元素的类名，MUI生成的类名格式为Mui[组件名]-[插槽名]，例如MuiInput-root，对应主题配置的路径就是components.Mui[组件名].styleOverrides.[插槽名]，可以快速定位需要修改的配置项。

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