How to change font color of disabled TextField Material UI React js

Question

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"

Note that reactjs.org recommends having you component with upper cased 1st letter. Update "myTextField" to "MyTextField" and see what happens. — pritam, Jul 15 '20 at 07:16

score 1 · Answer 1 · answered Jul 15 '20 at 07:40

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);

How to change font color of disabled TextField Material UI React js

1 Answers1