ReactJS + Material UI：SelectField 高度变化答案

【问题标题】：ReactJS + MaterialUI: SelectField height changeReactJS + Material UI：SelectField 高度变化
【发布时间】：2018-07-03 14:42:15
【问题描述】：

我在我的页面上使用 React material-ui SelectField。我无法调整选择字段的高度。这是我的代码 sn-p：

<SelectField
  underlineStyle={{
    display: 'none'
  }}
  style={{
    width: '49%',
    padding: '0 0 5em 5em',
    border: '1px solid #ccc',
    borderRadius: '5px',
    backgroundColor: '#fff',
    margin: '16px 0px 0px 28px',
  }}
  floatingLabelText="Select Stack*"
  value={this.state.stack}
  onChange={this.handleStackChange.bind(this)}
>
  {this.state.dropDownStack}
</SelectField>

我的用户界面如下

我需要降低下拉框的高度，我该怎么做？

【问题讨论】：

你想减少到什么程度？您是否尝试添加height？您能否提供一个您期望的结果示例？
@Nithyananth 听起来您需要使用引导程序。我推荐你react-native-elements。对我来说很好！ :)
@FacundoLaRocca 我需要降低 SelectField 区域的高度。请参考附有“选择堆栈作为占位符”的图片
您是否尝试在其样式中添加height？
@FacundoLaRocca height 没有做任何改变。我试过了。。

标签： reactjs react-native react-router material-ui

【解决方案1】：

您必须使用以下设置：

<SelectField
    className="custom-selectfield"
    underlineStyle={{
       visibility: 'hidden',
    }}
    floatingLabelStyle={{
        top: '14px',
    }}
    style={{
        border: '1px solid #ccc',
        height: '45px',
    }}
    floatingLabelText="Select Stack*"
    value={this.state.stack}
    onChange={this.handleStackChange.bind(this)}>
 {this.state.dropDownStack}
</SelectField>

在材质 UI 中应用了一些内部 CSS，因此为了覆盖它，向 SelectPicker 组件添加了一个自定义类，名为 custom-selectfield

在您的 CSS 文件中添加以下行

.custom-selectfield > div:nth-child(2) {
   margin-top: -6px !important;
}

【讨论】：