title: How do I control style of material-ui SelectField
body: <p>I am using material-ui with react <code>"material-ui": "^0.19.2"</code> and am trying to place a <code>SelectField</code> in a table. This much is working fine but the margin and/or padding applied to the select component is doing 2 unwanted things. First is the table rows now adjust to the height of the select which is making the size of the entire row too high. Secondly the alignment of everything else in the row is off.</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;SelectField
      value={ props.value }
      hintText="Select location.."
      style={ {
          width: 150,
          padding: 0,
          margin: 0
      } }
      onChange={ (event, key, payload) =&gt; this.updateLocation(event, payload, props.index, props.original.something) }&gt;
          { ::this.createMenu() }
  &lt;/SelectField&gt;
  
  createMenu = () =&gt; {
      const { locations } = this.props.list;
      return locations.map((location, i) =&gt; {
          return &lt;MenuItem key={ i } value={ location } primaryText={ location } /&gt;
      });
  }
  </code></pre>
  
  <p>If I could control the styling around the component(<code>Textfield</code>??) that is rendered I would try and make it fit properly but the style prop on the <code>SelectField</code> only seems to style the dropdown list.</p>
  
  <p>Another option for me here could be to go with a popover for the field and render a custom component to attach it to - but I haven't had much luck when trying use that.</p>