Material UI - Overide disabled styles for InputBase - reactjs

Question

I can't seem to find a way to override the following rule on an InputBase:
.MuiInputBase-root.Mui-disabled {
color: rgba(0, 0, 0, 0.38);
}
The rule I want to apply is: color: "rgba(0, 0, 0, 0.75)"
I've tried using classname and classes but nothing is working. Any ideas?
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
'&:disabled': {
color: "rgba(0, 0, 0, 0.75)"
}
},
disabled: {
color: "rgba(0, 0, 0, 0.75)",
'&:disabled': {
color: "rgba(0, 0, 0, 0.75)"
}
}
<TextField
disabled
id="outlined-disabled"
label="Disabled"
defaultValue="Hello World"
className={classes.textField}
classes={{
root: classes.disabled,
disabled: classes.disabled
}}
margin="normal"
variant="outlined"
/>
Codesandbox: https://codesandbox.io/s/material-demo-3xb7n

Answer 1

TextField doesn't support disabled rule name.
You need to provide InputProps to TextField, and there you can provide disabled rule name:
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import TextField from "#material-ui/core/TextField";
const useStyles = makeStyles(theme => ({
container: {
display: "flex",
flexWrap: "wrap"
},
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1)
},
inputRoot: {
'&$disabled': {
color:'red'
},
},
disabled: {}
}));
export default function OutlinedTextFields() {
const classes = useStyles();
return (
<form className={classes.container} noValidate autoComplete="off">
<TextField
disabled
id="outlined-disabled"
label="Disabled"
defaultValue="Hello World"
InputProps={{
classes:{
root: classes.inputRoot,
disabled: classes.disabled
}
}}
margin="normal"
variant="outlined"
/>
</form>
);
}

Answer 2

I want to provide another answer to this question. I found it while I was using the InputBase component, but it also works for TextField and the other input components provided by Material UI.
You are able to use nested selectors to style these types of components. When you create a TextField, by default it creates an HTML input element on the webpage. This is what you want to style.
For example, if you wanted to alter the color of the text from black to gray when the TextField is disabled, you could use this for your theme:
const useStyles = theme => ({
textField: {
'& input': {
color: '#000000',
},
'& input:disabled': {
color: '#CCCCCC',
},
},
});
And then, for the element, you would only need to set its class. There are no InputProps needed.
<TextField
disabled
id="outlined-disabled"
label="Disabled"
defaultValue="Hello World"
className={classes.textField}
margin="normal"
variant="outlined"
/>

Answer 3

Below is the code snippet that should work for you...
import { createMuiTheme, ThemeProvider } from "#material-ui/core/styles";
import TextField from "#material-ui/core/TextField";
export default function DisabledTextInput (props) {
const disabledFlag = true;
const theme = createMuiTheme({
overrides: {
MuiInputBase: {
root: {
"&$disabled": {
color: "rgba(0, 0, 0, 0.75)"
}
}
},
},
});
return (
<ThemeProvider theme={theme}>
<TextField
variant="outlined"
disabled={disabledFlag}
...
/>
</ThemeProvider>
);
}

Answer 4

This is what worked for me with MaterialUI version 5.x.
The new version of MaterialUI has a different way of defining overrrides.
import { createTheme, ThemeProvider } from '#mui/material/styles';
export default createTheme({
palette: {
components: {
MuiInputBase: {
styleOverrides: {
root: {
'&.Mui-disabled': {
color: red[500],
backgroundColor: grey[400],
}
}
}
}
},
});