ReactJS + MaterialUI：SelectField高度更改

Question

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

<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>

我的用户界面如下

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

Answer 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>

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

在CSS文件中添加以下行

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