I want to change the border color and text color when input is disabled. I tried all variants like you see below:
const textFieldStyle = {
'& label': {
color: darkMode?'#1976d2':'',
},
'& .MuiOutlinedInput-root': {
color:darkMode?'#1976d2':'',
'& fieldset': {
borderColor:darkMode?'#1976d2':'',
},
'&:hover fieldset': {
borderColor: darkMode?'#1976d2':'',
},
},
"& input.Mui-disabled": {
color: "green"
}
};
<TextField value={formState.vinInput} type="text" label="Stack" sx={textFieldStyle}/>
Rest of the style work just fine like general color and focused color!
you can use this code in v4:
MuiInputBase: {
root: {
"&$disabled": {
color: "red",
border: "1px solid red"
}
}
}
based on Material-ui documentation in version 5 The $ syntax used with JSS will not work with Emotion. You need to replace those selectors with a valid class selector.
this is the style
const useStyles = makeStyles({
customDisable: {
"& .MuiInputBase-input.Mui-disabled": {
color: "red !important",
"-webkit-text-fill-color": "red !important",
borderColor: "red !important"
},
"& .Mui-disabled .MuiOutlinedInput-notchedOutline": {
borderColor: "red !important"
}
}
});
and then in TextField like this
<TextField
disabled
className={classes.customDisable}
id="outlined-disabled"
defaultValue="Hello World"
/>
here is the Codesandbox