如何禁用材质 UI 输入的波纹效果？

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

有没有办法可以消除焦点时输入的涟漪效应？

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

Answer 2

找到了使用withStyles的方法：

const CustomTextField = withStyles({
  // Override default CSS for input
  root: {
    '& .MuiInput-underline': {
      // Remove the ripple effect on input
      '&:after': {
        borderBottom: 'initial',
      },
    },
  },
})(TextField);

...

// Usage
<CustomTextField />

用于比较不同解决方案与 Button 和 TextField 的 Codesandbox：