从 Material UI v5 中的文本字段更改文本字段的颜色

Question

我正在使用 MUI 并竭尽全力更改 MUI 文本字段中文本的颜色and/or 其背景颜色。

我按照文档进行了尝试：

const CssTextField = styled(TextField)({

还有组件内部的东西，比如

InputProps={{
           style: { color: "red" }
           }}

或

InputProps={{
            color: "red"
           }}

对我来说没有任何效果，我也不知道为什么。

希望你能帮助我。

Answer 1

你能试试吗

InputProps={{
        backgroundColor: "red"
       }}

而不是

InputProps={{
        color: "red"
       }}

Answer 2

可能

// Option 1
<TextField style ={{width: '100%'}} />

// Option 2
<TextField fullWidth />

Answer 3

根据docs，InputProps接受：

Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.

因此，style: { color: "red" } 不起作用，因为上述组件不接受 style 属性，而 color 属性接受主题颜色，例如 secondary ，error等

您可以使用 sx prop 自定义 TextField 的颜色和背景：

      <TextField
        id="outlined-basic"
        variant="outlined"
        sx={{
          input: {
            color: "red",
            background: "green"
          }
        }}
      />

从 Material UI v5 中的文本字段更改文本字段的颜色

Change Color of Text Field from Text Field in Material UI v5

reactjs

material-ui

textfield

background-color