title: Not able to change padding of material UI Select component
body: <p>I'm struggling to override the default padding of the Select component to match the size of my other text fields. I understand that I need to modify nested components but have been unable to find a working solution. </p>
  
  <pre><code>&lt;div className='wifi-chooser-column'&gt;
  &lt;TextField
      style={{margin: '6px'}} 
      label='SSID' 
      variant='outlined'
      size='small'
  /&gt;
  &lt;Select
      style={{margin: '6px', padding: '0px'}}
      variant='outlined'
      value={this.state.security}
      onChange={(event) =&gt; this.setState({security: event.target.value})}
      classes={{
          select: {
              padding: '10.5px 14px'
          }
      }}
  &gt;
      &lt;MenuItem label='security' value='Unsecured'&gt;Unsecured&lt;/MenuItem&gt;
      &lt;MenuItem value='WEP'&gt;WEP&lt;/MenuItem&gt;
      &lt;MenuItem value='WPA2'&gt;WPA2&lt;/MenuItem&gt;
  &lt;/Select&gt;
  &lt;TextField 
      style={{margin: '6px'}} 
      label='Username' 
      variant='outlined'
      size='small'
  /&gt;
  &lt;TextField 
      style={{margin: '6px'}} 
      label='Password' 
      variant='outlined'
      size='small'
  /&gt;
  </code></pre>
  
  <p></p>
  
  <p><a href="https://i.stack.imgur.com/bgp2g.png" rel="noreferrer">Layout issue</a></p>