0
243
ViewsHow do I override a MaterialUI outlined input through a global theme overrides file?
I am working on my theme file that contains all of my overrides and I am trying to complete the outlined input however, I get this weird bug when I try to do so. It appears that there are 2 input borders when these styles are applied.
MUI outlined input overrides section:
MuiOutlinedInput: {
styleOverrides: {
root: {
borderRadius: "4px",
border: "1px solid green ",
"&:hover": { borderRadius: "4px", border: "1px solid red" },
"&:disabled": { borderRadius: "4px", border: "1px solid black" },
"&.Mui-focused": { borderRadius: "4px", border: "2px solid blue" },
},
},
},
Any tips on fixing this are greatly appreciated!
·
Juan Pablo Isaza
1 answers
Answer question0
If you inspect the Outlined Input you'll see that there's 2 child elements. The first is the input element, the second is a fieldset element. You're needing to apply styles to the fieldset.
I am not sure exactly what you're attempting to do with the styling since you've got 4 different border colors being applied... I'm guessing you'd want something similar to
MuiOutlinedInput: {
styleOverrides: {
root: {
"& fieldset" {
borderColor: "red";
}
},
},
},
·
Juan Pablo Isaza
Report
Answer question