如何禁用物料UI输入的连锁反应？
如何禁用物料UI输入的连锁反应？
提问于 2020-06-30 09:05:31
如何在React中禁用Material UI中TextField组件的波纹或高亮颜色？
我尝试过覆盖主题：
theme.props.MuiTab.disableRipple = truetheme.props.MuiButton.disableRipple = truetheme.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
有没有一种方法可以在聚焦时消除对输入的连锁反应？
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-06-30 10:09:08
找到了使用withStyles的方法
const CustomTextField = withStyles({
// Override default CSS for input
root: {
'& .MuiInput-underline': {
// Remove the ripple effect on input
'&:after': {
borderBottom: 'initial',
},
},
},
})(TextField);
...
// Usage
<CustomTextField />用于比较按钮和TextField的不同解决方案的Codesandbox：
Stack Overflow用户
发布于 2020-12-19 07:39:45
这个解决方案对我很有效
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)`,
},
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62653942
复制相关文章
点击加载更多
相似问题
如何减小物料UI & formik中物料UI<Select>输入字段的高度和大小？
如何使用物料Ui选择输入道具？
物料UI输入与选择对齐
控制物料UI输入不起作用
使用物料UI更改react select中的禁用属性
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
