使用主题的材质 UI 文本字段样式覆盖答案

【问题标题】：Material UI TextField Style Override Using Theme使用主题的材质 UI 文本字段样式覆盖
【发布时间】：2021-12-31 13:41:21
【问题描述】：

我有一个文本字段：https://mui.com/components/text-fields/

 <TextField
      fullWidth
      type={'email'}
      variant={'standard'}
      label={'Email'}/>

我的背景很暗，所以我尝试使用我的主题来覆盖默认颜色。我已经能够在焦点变为白色时将文本颜色和底部边框更改为白色，但我无法弄清楚如何在失焦时将底部边框更改为白色。

没有对焦：

聚焦：

这是我的主题的样子：

const lightTheme: ThemeOptions = createTheme({
  palette: {
      primary: {
          main: '#ffffff',
      },
  },
  typography: {
      allVariants: {
          color: 'white'
      },
  },
  components: {
      MuiInputBase: {
          styleOverrides: {
              input: {
                  color: 'white',
              }
          }
      }
  }
});

我也很难在 Material UI 文档中找到有关哪些样式可用以及它们的作用的文档。也许除了帮助我解决这个特殊问题之外，每当我想更改任何 Material UI 组件的样式时，有人可以在文档中为我指出一个很好的参考点。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

如果通过浏览器查看样式，就会发现边框底部是为::before伪元素MuiInput-root类申请的。

就像我说的，我想如果你将相同的伪元素传递给你的主题，它会起作用。

const lightTheme: ThemeOptions = createTheme({
  palette: {
      primary: {
          main: '#ffffff',
      },
  },
  typography: {
      allVariants: {
          color: 'white'
      },
  },
  components: {
      MuiInputBase: {
          styleOverrides: {
              input: {
                  color: 'white',
                  '&::before': {
                      border-bottom: 1px solid rgba(0, 0, 0, 0.42); // use your color
                  }
              }
          }
      }
  }
});

【讨论】：