'How 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.

Default state

focused state

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!

javascriptcssreactjstypescriptmaterial-ui


Solution 1:[1]

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.

enter image description here

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";
          }
        },
      },
    },

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 jdk905

Related Questions