如何在React的Material UI中禁用TextField
组件的波纹或突出显示颜色?
我尝试了覆盖主题:
theme.props.MuiTab.disableRipple = true
theme.props.MuiButton.disableRipple = true
theme.props.MuiButtonBase.disableRipple = true
或添加自定义CSS:
// disable Ripple Effect
.MuiTouchRipple-root {
display: none;
}
// disable FocusHightlight
.MuiCardActionArea-focusHighlight {
display: none;
}
基于此处提出的问题的建议:https://github.com/mui-org/material-ui/issues/240
有没有办法在聚焦时消除输入上的波纹效应?
答案 0 :(得分:2)
这个解决方案对我有用
underline: {
"&:before": {
borderBottom: `2px solid var(--border)`,
},
"&:after": {
borderBottom: `2px solid var(--border)`,
transition: 'none',
},
"&:hover:not($disabled):not($focused):not($error):before": {
borderBottom: `2px solid var(--border)`,
},
}
答案 1 :(得分:0)
找到了使用withStyles
的方法:
const CustomTextField = withStyles({
// Override default CSS for input
root: {
'& .MuiInput-underline': {
// Remove the ripple effect on input
'&:after': {
borderBottom: 'initial',
},
},
},
})(TextField);
...
// Usage
<CustomTextField />
Codesandbox,用于将不同的解决方案与Button和TextField进行比较: