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.

Folio

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"
          }
        }}
      />

Rosati

Yeah that kind of works :). I edited your Code like this and then It works Perfekt. sx={{ background: "#FFFFFF", input:{ color: "red", } }} – Folio

How would you change the focus color here? So that focus and not focussed are two different colors? – Coltoncoltsfoot

@Coltoncoltsfoot Select the focus class and target the properties you need: ` sx={{ "& .MuiOutlinedInput-root": { "&.Mui-focused fieldset": { borderColor: "green", }, }, }} ` – Rosati

Answer 2

Can you try

InputProps={{
        backgroundColor: "red"
       }}

instead of

InputProps={{
        color: "red"
       }}

Screeching

Doesn´t do anything different :( Still remains the standard Color – Folio

Answer 3

Maybe

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

// Option 2
<TextField fullWidth />

Joppa

Yeah that works, but the width is not the Problem. – Folio

Answer 4

Try with these properties, add .MuiInputLabel-root and .MuiOutlinedInput-input as well.

As Mui documentation says you can create styled text field with these properties:

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',
      },
    },
  });

and later you can use

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

Limy

Answer 5

I did it similarly, but I just put the styles in a variable. Makes it a bit nicer.

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

const style = {
  "& label.Mui-focused": { //style for the label
    color: "gray",
  },
  "& .MuiOutlinedInput-root": { //style for the Normal Field
    "&.Mui-focused fieldset": { //style for the Focused
      borderColor: "#000",
    },
    "&:hover fieldset": { //style for hovering over Field
      borderColor: "#000",
    },
  },
};

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

Delphine