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

user_17365722 0
Viewed 1728

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.

material-ui typescript javascript
2 Answers

Inspired by Madhuri's solution, you can also use the sx prop without importing styled:

   <TextField
     fullWidth
     variant="standard"
     size="small"
     id="id"
     name="name"
     type="text"
     InputProps={{disableUnderline: true}}
     disabled={true}
     sx={{
       "& .MuiInputBase-input.Mui-disabled": {
         WebkitTextFillColor: "black",
       },
     }}
    />
user_110598450

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

user_132019840
Related