How to change text color of disabled MUI Text Field | MUI v5?

Question

I want to alter the font colour of disabled MUI TextField. It should be black so that it is visible.

Here is code

   <TextField
     fullWidth
     variant="standard"
      size="small"
     id="id"
     name="name"
     type="text"
     InputProps={{disableUnderline: true}}
     disabled={true}
    />

I removed underline for standard text Field. Now I want text color black when it is disabled.

Answer 1

You need to use ".Mui-disabled" class to override required css as below,

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

const CustomDisableInput = styled(TextField)(() => ({
  ".MuiInputBase-input.Mui-disabled": {
    WebkitTextFillColor: "#000",
    color: "#000"
  }
}));

function App() {
  return (
    <>
      <span>Disabled Input:</span>
      <CustomDisableInput
        fullWidth
        variant="standard"
        size="small"
        id="id"
        name="name"
        type="text"
        value="your text"
        InputProps={{ disableUnderline: true }}
        disabled={true}
      />
    </>
  );
}

Please check demo here - https://codesandbox.io/s/mui-customdisableinput-xl7wv