How to disable ripple effect on Material UI Input?

user_9206753 0
Viewed 6248

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

enter image description here

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?

material-ui reactjs css
2 Answers

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

user_60860190

Found a way using 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 for comparing different solutions with Button and TextField:

Edit Material demo

user_92067530
Related