I am building a custom MUI theme and I struggle to style the notchedOutline of a disabled <OutlinedInput />. I simply want that when the input is disabled, the border color is lighter than the default color.
Here is what I tried:
const theme = {
mode: 'light',
primary: {
main: primaryBlue,
},
components: {
MuiOutlinedInput: {
styleOverrides: {
// Ideally I could mix 'disabled' & 'notchedOutline' here
notchedOutline: {
borderColor: 'red' // it appear red
},
disabled: {
borderColor: 'green', // but not green
}
}
}
}
}
Have you got any clues ?
After a lot of trial and errors I finally managed to customize border color of the disabled input!
const theme = {
...
components: {
MuiOutlinedInput: {
styleOverrides: {
// THE ANSWER
root: {
"&.Mui-disabled": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: 'grey' // change border color
},
"& .MuiInputAdornment-root p": {
color: 'grey', // change adornment style
},
}
},
}
}
}
}
What confused me is that the input in itself didn't have the border. This was a sibling element <fieldset class='MuiOutlinedInput-notchedOutline'>
Try this :
'&$disabled': {
borderColor: 'green',
},
I think there is some problem with the disabled, Or border does not exist in disabled.
try this
MuiOutlinedInput: {
styleOverrides: {
root: {
'.Mui-disabled': {
border: '1px solid red',
},
},
},
},