Css 如何禁用材质UI输入的涟漪效应？

如何从React中的材质UI禁用

TextField

组件的涟漪或高亮显示颜色

我尝试过超越主题：

theme.props.MuiTab.disableRipple = true

或添加自定义CSS：

// disable Ripple Effect
.MuiTouchRipple-root {
display: none;
}

// disable FocusHightlight
.MuiCardActionArea-focusHighlight {
display: none;
}

根据此处提出的问题的建议：

---

有没有一种方法可以在聚焦时消除输入上的涟漪效应？

找到了一种使用

和样式的方法：

const CustomTextField=withStyles({
//覆盖输入的默认CSS
根目录：{
“&.MuiInput下划线”：{
//消除输入端的涟漪效应
“&：在”之后：{
borderBottom:'首字母'，
},
},
},
})（文本字段）；
...
//用法

用于使用按钮和文本字段比较不同解决方案的代码沙盒：

这个解决方案对我很有效


下划线：{
“&：之前”：{
borderBottom:`2px实体变量（--border）`，
},
“&：之后”：{
borderBottom:`2px实体变量（--border）`，
过渡：“无”，
},
“&：悬停：未（$disabled）：未（$focused）：未（$error）：before”：{
borderBottom:`2px实体变量（--border）`，
},
}
我不使用REACT，但您似乎需要在创建主题时禁用连锁反应。虽然该示例全局禁用该效果，但您可以命名特定的
prop
。另一个例子是Stackoverflow。@RenevanderLende我已经试过了，它对按钮、选项卡等很有效。但不是输入字段。您的JS代码示例没有显示这一点。你在定义主题时真的尝试过吗？（只是确定一下！）。在代码中的某个地方，创建时间和设置
…disableRipple=true
之间可能有明显的区别。@RenevanderLende别担心！我在答案中添加了代码沙盒
theme.props.MuiButtonBase.disableRipple = true

// disable Ripple Effect
.MuiTouchRipple-root {
display: none;
}

// disable FocusHightlight
.MuiCardActionArea-focusHighlight {
display: none;
}