如何将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}意味着您对选择下拉列表的显示方式不满意特定浏览器的实现。 You can't change it.

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

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

这是上面的CodeSandbox的一个分支，其中包含选择的非本地对象和上面的道具集：https://codesandbox.io/s/jpw77oo315