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

user_16481933 0
Viewed 3697

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.

material-ui reactjs textfield background-color
3 Answers

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

Can you try

InputProps={{
        backgroundColor: "red"
       }}

instead of

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

Maybe

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

// Option 2
<TextField fullWidth />

user_126332280
Related