How to change font color of disabled TextField Material UI React js
I’m trying to change disabled TextField font color and I followed related questions about it in stackoverflow but when I create a new TextField like below it does not work and shows nothing.
import {withStyles} from '@material-ui/core/styles'; import TextField from "@material-ui/core/TextField"; const myTextField = withStyles({ root: { "& .MuiInputBase-root.Mui-disabled": { color: "rgba(0, 0, 0,0.0)" } } })(TextField); <myTextField value={user != null ? user.nam : null} disabled={true} variant="outlined" margin="normal" fullWidth id="nam" autoFocus label="nam" /> <TextField value={user != null ? user.famil : null} disabled={true} variant="outlined" margin="normal" fullWidth id="famil" autoFocus label="famil" />It shows the TextField "famil" but doesn’t show myTextField "nam"
My muistake was I use lowerCase name for React Component . I update "myTextField" to "MyTextField" and it works.
Another thing that you must use .MuiFormLabel-root.Mui-disabled class to change font color. .MuiInputBase-root.Mui-disabled class just change lable font color of TextField.
const MyTextField = withStyles({ root: { "& .MuiInputBase-root.Mui-disabled": { color: "rgba(0, 0, 0,0.0)" }, "& .MuiFormLabel-root.Mui-disabled": { color: "rgba(0, 0, 0,0.0)" }, } })(TextField);
