css - 如何禁用 Material UI Input 的涟漪效应？

Question

如何在 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

有没有一种方法可以消除聚焦时对输入的链式 react ？

Answer 1

这个解决方案对我有用

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)`,
  },
}