title: How to remove curved border and inset box shadow from Material UI TextField React component?
body: <p>Here's the input field:</p>
  
  <p><a href="https://i.stack.imgur.com/Z6URV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z6URV.png" alt="enter image description here"></a></p>
  
  <p>It has this inner shadow in it and curved borders.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>import React, {Component} from 'react';
  import TextField from 'material-ui/TextField';
  import { connect } from 'react-redux';
  
  class SearchInput extends Component {
  
      constructor(props) {
          super(props);
          this.state = {
              searchInputFieldValue: ''
          };
      }
  
      textFieldOnChangeSearch(event) {
          this.setState({searchInputFieldValue: event.target.value});
          this.props.phoneBookSearch(event.target.value);
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;TextField
                      underlineShow={false}
                      hintText="Hae.."
                      onChange={this.textFieldOnChangeSearch.bind(this)}
                      value={this.state.searchInputFieldValue}
                      style={{
                          boxShadow: 'none',
                          height: '57px', 
                          width: '460px',
                          /*
                          borderStyle: 'solid',
                          borderColor: '#2375BB',
                          borderWidth: '2px',
                          */
                          backgroundColor: '#FFFFFF'
                      }}
                      /&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default SearchInput;
  </code></pre>
  
  <p>Here's how it shows in the browser's inspect:</p>
  
  <p>If I uncomment the commented part of the style in the code it shows like this:</p>
  
  <p><a href="https://i.stack.imgur.com/pGNNa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pGNNa.png" alt="enter image description here"></a></p>
  
  <p>As you can see, here's the blue border that I'd like but the curved borders and the inner shadow is still showing in the background.</p>
  
  <p>How to remove them?
  Even box-shadow: none !important; in web tools doesn't remove it.</p>