如何在Material UI输入上禁用波纹效果?

时间:2020-06-30 09:05:31

标签: css reactjs material-ui

如何在React的Material UI中禁用TextField组件的波纹或突出显示颜色?

enter image description here

我尝试了覆盖主题:

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

有没有办法在聚焦时消除输入上的波纹效应?

2 个答案:

答案 0 :(得分:2)

这个解决方案对我有用

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

答案 1 :(得分:0)

找到了使用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进行比较:

Edit Material demo