How to disable ripple effect on Material UI Input?

Question

How to disable ripple or highlight color of the TextField component from Material UI in React?

I have tried overriding theme:

theme.props.MuiTab.disableRipple = true

theme.props.MuiButton.disableRipple = true

theme.props.MuiButtonBase.disableRipple = true

or adding custom CSS:

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

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

based on the suggestions from the issue raised here: https://github.com/mui-org/material-ui/issues/240

Is there a way I could remove the ripple effect on the input when focused?

Answer 1

This solution worked for me

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