反應 + 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
  }
}}

現場演示