score:0

Accepted answer

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

score:2

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


Related Query

More Query from same tag