如何赋予样式 Material-ui 选择字段下拉菜单？答案

【问题标题】：How to give style Material-ui Select-field Dropdown menu?如何赋予样式 Material-ui 选择字段下拉菜单？
【发布时间】：2018-03-24 04:03:37
【问题描述】：

我正在使用 material-ui 选择字段组件

<SelectField
   multiple={true} 
   hintText="Checkbox Filters"
   dropDownMenuProps={{
     iconButton:<ActionHome />,
   }}
   className="checkbox-com"
   underlineStyle={{display:'none'}}
   hintStyle={{bottom:'13px', overflow: 'hidden',  whiteSpace: 'nowrap', textOverflow: 'ellipsis', width: 
   'calc(100% - 40px)', color: '#757575', fontWeight: 500}}
   labelStyle={{top: 0, paddingRight: 40, height: 48, lineHeight: '48px'}}
   iconStyle={{top: 2,right: 10, fill: '#757575', width: 44, height: 44}}
   style={{maxWidth: '200px', minWidth: 200, width: 'auto', lineHeight: '22px', height: 48, fontSize: 
   14}}>
 <List>
     <ListItem
       leftCheckbox={<Checkbox />}
       primaryText="Project 1"
       innerDivStyle={{fontSize: 14, paddingLeft: 60}}/>
     <ListItem
       leftCheckbox={<Checkbox />}
       primaryText="Project 2"
       innerDivStyle={{fontSize: 14, paddingLeft: 60}}/>
     <ListItem
       leftCheckbox={<Checkbox />}
       primaryText="Project 3"
       innerDivStyle={{fontSize: 14, paddingLeft: 60}}/>
  </List>
 </SelectField>

但他们的表现是这样的

但我需要这样展示

请告诉我如何设置这样的下拉菜单样式

【问题讨论】：

你是怎么解决的？可以分享一下吗？

标签： html css reactjs material-ui

【解决方案1】：

如果我正确理解您的问题，那么您正在寻找的是

anchorOrigin={{vertical: 'bottom', horizontal: 'left'}}

在DropDownMenu上

【讨论】：

【解决方案2】：

这是Material ui select field 的默认行为，但您可以覆盖它

.mat-select-panel-wrap {
    margin-top: 36px;//Its the height ot your selectbox
}

使用!important，以防它不覆盖

【讨论】：