无法为Material UI <iconmenu>设置小于84px的宽度

Question

我尝试了各种样式方法，但下拉菜单的宽度似乎没有减少。无论我多少尝试减少，它都固定在84px。但是，如果我将宽度设置为大于100px，则行为正确。我甚至尝试在minWidth上设置menuStyle，似乎已应用于相应的div。

我应该考虑其他问题还是有办法解决这个问题？任何线索都会非常有帮助。我使用的是material-ui版本0.15.4

import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import Divider from 'material-ui/Divider';
import Download from 'material-ui/svg-icons/file/file-download';
import ArrowDropRight from 'material-ui/svg-icons/navigation-arrow-drop-right';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';

class Example extends React.Component {
  render() {
    return (
      <IconMenu
        iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
        anchorOrigin={{horizontal: 'left', vertical: 'top'}}
        targetOrigin={{horizontal: 'left', vertical: 'top'}}
        menuStyle={{width: "25px", minWidth: "25px"}}
      >
        <MenuItem key="1" style={{height: "5px", marginBottom: "20px"}} leftIcon={<Download />} />
        <MenuItem key="2" style={{height: "5px", marginBottom: "20px"}} leftIcon={<Download />} />
        <MenuItem key="3" style={{height: "5px", marginBottom: "20px"}} leftIcon={<Download />} />
        <MenuItem key="4" style={{height: "5px", marginBottom: "20px"}} leftIcon={<Download />} />
        <MenuItem key="5" style={{height: "5px", marginBottom: "20px"}} leftIcon={<Download />} />
        <MenuItem key="6" style={{height: "5px", marginBottom: "20px"}} leftIcon={<Download />} />
        <MenuItem key="7" style={{height: "5px", marginBottom: "20px"}} leftIcon={<Download />} />
        <MenuItem key="8" style={{height: "5px", marginBottom: "20px"}} leftIcon={<Download />} />
      </IconMenu>
    )
  } 
}

Answer 1

只需将此行添加到css

即可

div[role=presentation] {
  width: 50px !important;
}

<强> WORKING DEMO