如何将此 material-ui 的选择列表与输入块的底线对齐？

Question

我有一个由 material-ui 构建的选择，所有功能都很好，但我想将选择列表的顶行与输入块的底行对齐，我该怎么做？

我的代码：

const styles = theme => ({
  formControl: {
    margin: theme.spacing.unit
  }
});

<FormControl className={classes.formControl} fullWidth={true}>
  <InputLabel htmlFor="deviceSource-native-select">Device source</InputLabel>
  <Select
    native={true}
    onChange={this.onDeviceSourceChange}
    inputProps={{
      id: 'deviceSource-native-select',
      name: 'deviceSource'
    }}
  >
    <option value={'Ten'}>Ten</option>
    <option value={'Twenty'}>Twenty</option>
    <option value={'Thirty'}>Thirty</option>
  </Select>
</FormControl> 

Answer 1

我创建了一个 CodeSandbox 在这里复制您的问题：https ://codesandbox.io/s/k279v04v3v

不幸的是，使用native={true}意味着您在选择下拉列表的显示方式方面受特定浏览器实现的支配。你不能改变它。

如果您愿意使用非本地选择，则可以通过在 Select 组件上设置以下属性来实现：

MenuProps={{
  getContentAnchorEl: null,
  anchorOrigin: {
    vertical: "bottom",
    horizontal: "left"
  }
}}

这是上述 CodeSandbox 的一个分支，带有选择的非原生和上述道具集：https ://codesandbox.io/s/jpw77oo315