在构建MUI自定义主题时，根据它们的道具设置样式组件
在构建MUI自定义主题时，根据它们的道具设置样式组件
提问于 2022-03-24 11:10:31
我正在构建一个自定义的MUI主题，并且我很难将禁用的notchedOutline的样式设置为<OutlinedInput />。我只是希望当输入被禁用时，边框颜色比默认颜色要浅。
以下是我尝试过的：
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
}
}
}
}
}你有什么线索吗？
Stack Overflow用户
回答已采纳
发布于 2022-03-24 15:58:25
经过大量的尝试和错误，，我终于成功地定制了禁用输入的边框颜色！
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'>。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71601417
复制相关文章
相似问题
腾讯云开发者
