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?

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