反应 + MUI + 文本字段

Question

我目前正在尝试更改 MUI TextField（文本和边框）的默认颜色。 我在官方网站上提到的几种方法都失败了。 在我尝试过的所有解决方案中，最有希望的是这个：

<TextField InputLabelProps={{ style: { color: 'white' } }} ...>

此解决方案在未编辑时会更改文本的颜色。 一旦我编辑文本，颜色就会变为原始值。 我也尝试了这个解决方案但没有成功：

const theme = createTheme({
  components: {
    MuiTextField: {
      defaultProps: {
        style: { color: 'white'}
      }
    }
  }
});

应用这个主题后，我没有任何变化。 有人尝试过同样的问题吗？ 问候。

Answer 1

您不能只将 className 传递给您的 TextField 组件并使用 css 更改样式吗？

Answer 2

您可以使用 MUI 调色板：

"primary" | "secondary" | "error" | "info" | "success" | "warning"

<TextField
  color="primary"
/>

这些颜色可以用ThemeProvider覆盖并用作 onFocus 的边框颜色。

const getMuiTheme = () =>
  createTheme({
    palette: {
      primary: {
        main: "#FF0000" // red
      },
      secondary: {
        main: "#00FF00" // green
      }
    }
  });


<ThemeProvider theme={getMuiTheme()}>
  <TextField />
  ...
</ThemeProvider>

然后，您可以在TextField中使用sx道具来处理输入颜色：

sx={{
  input: {
    color: getMuiTheme().palette.secondary.main
  }
}}

现场演示