构建 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

Try this :

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

Answer 2

我觉得disabled有问题，或者disabled不存在边框

试试这个

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

Answer 3

经过多次尝试和错误我终于成功地自定义了禁用输入的边框颜色！

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

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

Style component according to their props when building MUI custom theme

javascript

css

reactjs

material-ui