material-ui：无法设置图标菜单的样式

Question

即使我使用Icon Menu或listStyle，我也无法设置menuStyle的样式我只需要像这样改变位置

就像这样

更新

示例：

   import React from 'react';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';


const IconMenuExampleSimple = () => (
  <div>
    <IconMenu
      iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
      anchorOrigin={{horizontal: 'left', vertical: 'top'}}
      targetOrigin={{horizontal: 'left', vertical: 'top'}}
      listStyle={{top: 80}} //this not work
      menuStyle={{top: 80}} //this not work
    >
      <MenuItem primaryText="Refresh" />
      <MenuItem primaryText="Send feedback" />
      <MenuItem primaryText="Settings" />
      <MenuItem primaryText="Help" />
      <MenuItem primaryText="Sign out" />
    </IconMenu>

  </div>
);

export default IconMenuExampleSimple;

Answer 1

有点晚了，但是您可以使用anchorOrigin={{vertical: 'bottom', horizontal: 'left}};但是...是的，旧版本的material-ui很难满足样式要求，menuStyle只是将样式添加到深层嵌套的div中，而不是菜单本身。

Answer 2

自定义菜单位置

默认情况下，菜单将显示在（y轴）下方（x轴之后），而不会与触发重叠。可以使用xPosition（在|之前|之后）和yPosition（在|上方|下面）属性来更改位置。可以使用overlayTrigger属性强制菜单与触发器重叠。

这里是代码。。

<mat-menu #appMenu="matMenu" yPosition="above">
  <button mat-menu-item>Settings</button>
  <button mat-menu-item>Help</button>
</mat-menu>