Material UI | How to change the font colour of a disabled input text field?

Question

The colour of a disabled input text field created using material UI is light grey by default and it is not very visible against a white background. Is there any way to change the font colour of a disabled input text field?

Involute

Answer 1

Below is an example of how to do this showing the customized version next to the default styling.

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";

const DarkerDisabledTextField = withStyles({
  root: {
    marginRight: 8,
    "& .MuiInputBase-root.Mui-disabled": {
      color: "rgba(0, 0, 0, 0.6)" // (default alpha is 0.38)
    }
  }
})(TextField);

export default function Demo() {
  const [disabled, setDisabled] = React.useState(true);
  return (
    <>
      <Button onClick={() => setDisabled(!disabled)}>Toggle Disabled</Button>
      <br />
      <br />
      <DarkerDisabledTextField
        disabled={disabled}
        id="outlined-basic"
        label="Custom"
        value={`Disabled = ${disabled}`}
        variant="outlined"
      />
      <TextField
        disabled={disabled}
        id="outlined-basic"
        label="Default"
        value={`Disabled = ${disabled}`}
        variant="outlined"
      />
    </>
  );
}

Bosanquet

For me changing the font color only worked with - WebkitTextFillColor: red - – Calif

@Calif for chrome worked WebkitTextFillColor: "red" but for safari we have to use color:"red" – Persuasive

Answer 2

In the Mui-v5 above solution is not working. Below are the solutions for Mui-v5. Solution 1:

const styles = theme => ({
  input: {
    "& input.Mui-disabled": {
      color: "green"
    }
  }
});

Solution: 2 (use sx property for the component)

sx={{
    "& .MuiInputBase-input.Mui-disabled": {
      WebkitTextFillColor: "#000000",
    },
  }}

eg.

<TextField
      fullWidth
      disabled=true
      variant="outlined"
      sx={{
          "& .MuiInputBase-input.Mui-disabled": {
            WebkitTextFillColor: "#000000",
        },
      }}
  />

Joijoice

Answer 3

works (MUIv5):

sx={{
    "& .MuiInputBase-input.Mui-disabled": {
      WebkitTextFillColor: "#000000",
    },
  }}

Affiliation

Answer 4

I think the simplest way is to create an object to define the font color and pass it to the TextField's inputProps.

    const fontColor = {
        style: { color: 'rgb(50, 50, 50)' }
    }

This way you can toggle the font with the components state as you wish or simply keep it constant.

<TextField
    label="Title"
    onChange={updateTitle}
    value={title}
    disabled={true}
    inputProps={fontColor}/>

Claytor

Answer 5

import { TextField, styled } from '@mui/material'

const CustomTextField = styled(TextField)({
  '& .MuiInputBase-root.Mui-disabled': {
    backgroundColor: '#f0f0f0',
  },
});

Then use them as standard component

<CustomTextField
            name="manual"
            label="Manual"
            size="small"
            disabled={watch({}).platform === 'manual' ? false : true}
          />

if u use RHF with controller, mean u create custom TextField using RHF, u just change the component inside the styled()

For example:

import RHFTextField from "../RHFTextField"

const CustomTextField = styled(RHFTextField)({
  '& .MuiInputBase-root.Mui-disabled': {
    backgroundColor: '#f0f0f0',
  },
});

with background color changes, it will more visible..

Willing

Answer 6

None of all the many answers online worked for me, using MUI v4.

Finally I found a very easy but hacky solution for setting the font color of a disabled TextField component.

The problem is, (at least for Firefox) it will use this weird style cheet:

.css-[...]-MuiInputBase-input-MuiOutlinedInput-input.Mui-disabled {
    opacity: 1;
    -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
}

I'm too new to this stuff and I don't know how to change it, so my way was to overwrite it:

.css-[...]-MuiFormControl-root-MuiTextField-root input {
    -webkit-text-fill-color: rgba(255,255,255,0.6) !important;
    color: rgba(255,255,255,0.6);
}

The !important part is important!

In React with MUI v4, it's as simple as that:

    const textFieldColor = /*...*/;
    const textFieldSX = {
        input: {
            "-webkit-text-fill-color": `${textFieldColor} !important`,
            color: `${textFieldColor} !important`,
        },
    };
    /*...*/
    <TextField sx={textFieldSX} />

Just in case, this -webkit-text-fill-color property would turn into color one time, one can use an !important there too.

Abana

Answer 7

This should work for MUI v5. Below is an example of changing default look for border, background, text color, and label color

<TextField
          fullWidth
          label="label"
          value={data}
          disabled
          sx={{
            "& .MuiInputBase-input.Mui-disabled": {
              WebkitTextFillColor: "#000000", //Adjust text color here
            },
            "& .MuiInputBase-root.Mui-disabled": {
              backgroundColor: "#f9f9f9", //Adjust background color here
            },
            "& .MuiOutlinedInput-root.Mui-disabled .MuiOutlinedInput-notchedOutline":
              {
                borderColor: "#000000", //Adjust border color here
              },
            "& .MuiInputLabel-root.Mui-disabled": {
              color: "rgba(0, 0, 0, 0.87)", // Darker label color
            },
          }}
        />

Nicosia