如何控制material-ui SelectField的样式

Question

我正在使用带有 react "material-ui": "^0.19.2" 的 material-ui 并试图在表格中放置一个 SelectField。这一切都很好，但是应用于选择组件的边距和/或填充正在做两件不需要的事情。首先是表格行现在调整为选择的高度，这使得整行的大小太高。其次，该行中其他所有内容的对齐方式已关闭。

我的代码：

<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 上的样式道具似乎只能设置下拉列表的样式。

对我来说，另一个选择可能是为该字段添加一个弹出框并渲染一个自定义组件以将其附加到 - 但我在尝试使用它时运气不佳。

Answer 1

SelectField 上的以下道具给了我我想要的：

   <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>

如果有人知道更好的方法，请添加答案，但现在这将回答我的问题。

Answer 2

<b>Just add maxHeight={200} inside SelectField</b>

< SelectField
multiple

fullWidth = {true}

value={this.state.candidate_profile_arr}

onChange = {this.handleChange}

maxHeight = {200}

>

{this.state.profile.map((profile, i) =>

<MenuItem  value={profile.id} key={i} primaryText={profile.name} />)
}

</SelectField>