时间戳

首页 > 解决方案 > 如何将此material-ui的选择列表与输入块的底线对齐？

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

问题描述

我有一个由 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>

在此处输入图像描述

在此处输入图像描述

标签： cssreactjsmaterial-ui

解决方案

我创建了一个 CodeSandbox，可以在此处复制您的问题：https ://codesandbox.io/s/k279v04v3v

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

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

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

这是上面 CodeSandbox 的一个分支，带有 select 非本地和上面的 prop 集：https ://codesandbox.io/s/jpw77oo315

推荐阅读