Style component according to their props when building MUI custom theme-CodePudding

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 ?

CodePudding user response：

Try this :

'&$disabled': {
       borderColor: 'green',
      },

CodePudding user response：

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',
            },
        },
    },
},

CodePudding user response：

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