我正在構建一個自定義 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
}
}
}
}
}
你有什么線索嗎？
uj5u.com熱心網友回復：
嘗試這個 ：
'&$disabled': {
borderColor: 'green',
},
uj5u.com熱心網友回復：
我認為殘疾人有問題，或者殘疾人不存在邊界。
嘗試這個
MuiOutlinedInput: {
styleOverrides: {
root: {
'.Mui-disabled': {
border: '1px solid red',
},
},
},
},
uj5u.com熱心網友回復：
經過大量的試驗和錯誤，我終于設法自定義禁用輸入的邊框顏色！
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'>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/449286.html
標籤：javascript css 反应 材料-ui