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

Question

我正在使用 MUI，并已尽一切努力更改 MUI 文本字段中文本的颜色和/或其背景颜色。

我按照文档进行了尝试：

const CssTextField = styled(TextField)({

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

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

或

InputProps={{
            color: "red"
           }}

对我来说没有任何作用，我不知道为什么。

希望你能帮助我。

Answer 1

根据docs，

InputProps

接受：

应用于输入元素的属性。它将是 FilledInput、OutlinedInput 或 Input 组件，具体取决于变量属性值。

因此，

style: { color: "red" }

不起作用，因为上述组件不接受

style

属性，而

color

属性接受主题颜色，例如

secondary

、

error

等。

您可以使用

sx prop

自定义 TextField 的颜色和背景：

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

Answer 2

你可以尝试一下吗

InputProps={{
        backgroundColor: "red"
       }}

而不是

InputProps={{
        color: "red"
       }}

Answer 3

也许

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

// Option 2
<TextField fullWidth />

Answer 4

尝试使用这些属性，同时添加

.MuiInputLabel-root

和

.MuiOutlinedInput-input

。

正如 Mui 文档所说，您可以使用这些属性创建样式文本字段：

const WhiteTextField = styled(TextField)({
    '& label.Mui-focused': {
      color: 'white',
    },
    '& .MuiInput-underline:after': {
      borderBottomColor: 'white',
    },
    '& .MuiInputLabel-root': {
      color: 'white',
    },
    '& .MuiOutlinedInput-input': {
      color: 'white',
    },
    '& .MuiOutlinedInput-root': {
      '& fieldset': {
        borderColor: 'white',
      },
      '&:hover fieldset': {
        borderColor: 'white',
      },
      '&.Mui-focused fieldset': {
        borderColor: 'white',
      },
    },
  });

稍后就可以使用

<CssTextField label="*" name="*" variant="outlined" size="small" />

Answer 5

我做了类似的事情，但我只是将样式放在一个变量中，使它更好一点......

import { TextField } from "@mui/material";

const style = {
  "& label.Mui-focused": {
    color: "gray",
  },
  "& .MuiOutlinedInput-root": {
    "&.Mui-focused fieldset": {
      borderColor: "#000",
    },
    "&:hover fieldset": {
      borderColor: "#000",
    },
  },
};

function InputField() {
  return (
    <>
      <TextField
        variant="outlined"
        sx={style}
      />
    </>
  );}
export default InputField;