材料のスタイルを制御するにはどうすればいいですか？SelectField

Question

"material-ui": "^0.19.2"の反応でmaterial-uiを使用していて、SelectFieldをテーブルに配置しようとしています。これはうまく機能していますが、選択コンポーネントに適用されているマージンやパディングは2つの不要なことをしています。まず、テーブル行は、行全体のサイズを大きくしすぎている選択の高さに調整されます。第二に、行の他のすべての配置がオフです。

マイコード：

<SelectField 
    value={ props.value } 
    hintText="Select location.." 
    style={ { 
     width: 150, 
     padding: 0, 
     margin: 0 
    } } 
    onChange={ (event, key, payload) => this.updateLocation(event, payload, props.index, props.original.something) }> 
     { ::this.createMenu() } 
</SelectField> 

createMenu =() => { 
    const { locations } = this.props.list; 
    return locations.map((location, i) => { 
     return <MenuItem key={ i } value={ location } primaryText={ location } /> 
    }); 
} 

私はコンポーネント（Textfield ??）周りのスタイリングを制御することができれば、私は試してみて、それが適切にフィットしますが、SelectFieldのスタイル小道具だけのスタイルに思えるでしょうレンダリングされますドロップダウンリスト

私のここでのもう1つの選択肢は、フィールドのポップオーバーと一緒にそれを添付するカスタムコンポーネントをレンダリングすることです。しかし、それを使用しようとすると大したことはありませんでした。

ここのお手伝いをよろしくお願いいたします。 SelectField上

Answer 1

次の小道具は、私が欲しいものを私に与える：

<SelectField 
      value={props.value} 
      hintText="Select location.." 
      style={{ 
      width: 150, 
      height: 15, 
      lineHeight: 15, 
      position: 'relative', 
      textAlign: 'center', 
      fontSize: '0.9em' 
      }} 
      menuStyle={{ 
      position: 'absolute', 
      top: -12.5, 
      }} 
      underlineStyle={{ 
      position: 'relative', 
      top: 20, 
      }} 
      onChange={(event, key, payload)=>this.updateLocation(event,payload,props.index,props.original.something)} 
     > 
      { 
      ::this.createMenu() 
      } 
     </SelectField> 

誰もが答えを追加してくださいが、今、これは私の質問にお答えしますためのより良い方法を知っていれば。