如何更改 React Material 中 TextField 辅助文本后面的背景颜色

Question

我有一个白色背景的

TextField

。但我希望帮助文本的背景颜色是透明的（在本例中它将是黑色）而不是白色。我找不到在

MuiFormHelperText

https://mui.com/material-ui/api/form-helper-text/ 中设置它的方法。看起来辅助文本的背景颜色是由

TextField

中的

.MuiTextField-root

设置的。是否可以更改辅助文本的背景颜色？

export const theme = createTheme({
  components: {
    MuiTextField: {
      styleOverrides: {
        root: {
          backgroundColor: '#ffffff' # the background color of the text field,
        },
      },
    },
    // This is not working
    // MuiFormHelperText: {
    //   styleOverrides: {
    //     root: {
    //      backgroundColor: 'transparent',
    //     },
    //  },
    // },
  },
});

Answer 1

为了确保应用您的样式，您可以使用 !important 标志来赋予其更高的特异性。

const theme = createTheme({
  components: {
    MuiFormHelperText: {
      styleOverrides: {
        root: {
          backgroundColor: 'transparent !important', // Add !important
        },
      },
    },
  },
});