reactjs - 根据标签尺寸设置 Material UI选择的宽度

Question

我有一个选择:

<FormControl className={classes.formControl}>
    <InputLabel htmlFor="age-native-simple">{this.props.label}</InputLabel> 
    <Select
            native
            value={this.state.value}
            onChange={this.handleSelectChange('value')}
        inputProps={{
            name: this.props.label,
            id: this.props.id,
        }}
        >
        {this.buildSelectOptions(this.props.options)}
    </Select>
                        {(this.props.helperText)?<FormHelperText>{this.props.helperText}</FormHelperText>:null}
</FormControl>

formControl 类如下所示:

formControl: {
    margin: 0,
    fullWidth: true,
    backgroundColor: '#9ee',
    wrap: 'nowrap'
},

它工作得相当好 - 将自身调整得尽可能小，同时仍然显示最大可能的选项值。

不幸的是，当InputLabel比选择options的内容长时......标签会换行并且看起来很糟糕。

如何防止我的选择包裹输入标签？我希望它能够根据需要简单地扩展选择，就像在 option 列表中存在长条目(如果可能)时那样。由于多种原因，设置“minWidth”并不是我的首选解决方案(主要是该组件被许多不同的东西使用，并且计算它们的 minWidth 会很困难)

Answer 1

编辑:我误解了这里的问题。我认为问题出在菜单项包装上，我的答案可以解决。对这个问题的正确而简单的解决是您缺少 display: 'flex'来自您的 formControl 类。

像这样:

  formControl: {
    margin: 0,
    fullWidth: true,
    backgroundColor: '#9ee',
    display: 'flex',
    wrap: 'nowrap'
  },

这是一个工作 sandbox

看起来像<Select/>有一个 autoWidth您可以设置该属性来实现此目的。默认为false 。

来自文档:

If true, the width of the popover will automatically be set according to the items inside the menu, otherwise it will be at least the width of the select input.

它的用法如下:

 <Select
    native
    autoWidth={true}
    value={this.state.value}
    onChange={this.handleSelectChange('value')}
    inputProps={{
        name: this.props.label,
        id: this.props.id,
    }}
    >
    {this.buildSelectOptions(this.props.options)}
 </Select>