title: How to disable ripple effect on Material UI Input?
body: <p>How to disable ripple or highlight color of the <code>TextField</code> component from Material UI in React?</p>
  <p><a href="https://i.stack.imgur.com/qB2cm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qB2cm.png" alt="enter image description here" /></a></p>
  <p>I have tried overriding theme:</p>
  <pre><code>theme.props.MuiTab.disableRipple = true
  </code></pre>
  <pre><code>theme.props.MuiButton.disableRipple = true
  </code></pre>
  <pre><code>theme.props.MuiButtonBase.disableRipple = true
  </code></pre>
  <p>or adding custom CSS:</p>
  <pre><code>// disable Ripple Effect
  .MuiTouchRipple-root {
  display: none;
  }
  
  // disable FocusHightlight
  .MuiCardActionArea-focusHighlight {
  display: none;
  }
  </code></pre>
  <p>based on the suggestions from the issue raised here: <a href="https://github.com/mui-org/material-ui/issues/240" rel="nofollow noreferrer">https://github.com/mui-org/material-ui/issues/240</a></p>
  <p>Is there a way I could remove the ripple effect on the input when focused?</p>