html - 如何赋予样式 Material-ui Select-field 下拉菜单？

Question

我正在使用 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>

但他们表现得像这样

但我需要这样显示

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

Answer 1

如果我没有正确理解你的问题，你正在寻找的是

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

在 DropDownMenu 上