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

Question

I am Using MUI and did everything to change the Color of the Text in a MUI Text Field and/or its background Color.

I followed the Documentation and tried:

const CssTextField = styled(TextField)({

And also Things inside the Component, such as

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

or

InputProps={{
            color: "red"
           }}

Nothing works for me and I don´t know why.

I hope that you can help me.

Answer 1

According to docs, InputProps accepts:

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

Therefore, style: { color: "red" } doesn't work because the aforementioned components don't accept the style prop and color prop accepts theme colors such as secondary , error etc.

You can customize the color and background of your TextField with sx prop:

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