构建 MUI 自定义主题时根据道具设置样式组件

Question

我正在构建一个自定义 MUI 主题，我很难为禁用的<OutlinedInput />的notchedOutline设置样式。 我只是希望当禁用输入时，边框颜色比默认颜色浅。

这是我尝试过的：

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

你有什么线索吗？

Answer 1

经过大量的试验和错误，我终于设法自定义禁用输入的边框颜色！

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

令我困惑的是输入本身没有边框。 这是一个兄弟元素<fieldset class='MuiOutlinedInput-notchedOutline'>

Answer 2

尝试这个：

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

Answer 3

我认为禁用有一些问题，或者禁用中不存在边框。

尝试这个

MuiOutlinedInput: {
    styleOverrides: {
        root: {
            '.Mui-disabled': {
                border: '1px solid red',
            },
        },
    },
},