无法为材料UI <IconMenu />设置宽度小于84 to的参数

Question

我尝试了各种样式方法，但下拉菜单似乎没有减少宽度。它是固定在84px，无论我试图减少多少。但是，如果我将宽度设置为大于100px，则它的行为是正确的。我甚至尝试在menuStyle上设置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;
}

工作演示