如何提供样式材料-ui选择字段下拉菜单？

Question

我正在使用material-ui select-field组件

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

但他们表现得像这样

但我需要像这样展示

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

Answer 1

如果我理解你的问题，那么你要找的是

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

在DropDownMenu

上

Answer 2

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

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

使用!important，以防其无法覆盖