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

是否有方法可以在输入框聚焦时移除涟漪效果？

- Jee Mok

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

- robzizo

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 />

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

- Jee Mok

---

我不使用REACT，但是看起来你需要在主题创建时禁用涟漪效果Material UI FAQ: How can I disable the ripple effect globally?。虽然示例在全局禁用了该效果，但你可能能够指定特定的prop。另一个Stackoverflow上的例子SO42211994。 - Rene van der Lende

@RenevanderLende 我已经尝试过了，对于按钮、选项卡等效果很好，但是对于输入框不起作用。 - Jee Mok

你的JS代码示例没有展示这一点。你真的在定义主题时尝试过吗？（只是为了确认！）。在创建时间和在代码中某处设置...disableRipple = true之间可能存在明显的差异。 - Rene van der Lende

@RenevanderLende 不用担心！我已经在答案中添加了代码沙盒。 - Jee Mok