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

【问题标题】：material-ui: unable to style Icon Menumaterial-ui：无法设置图标菜单的样式
【发布时间】：2018-07-15 17:26:48
【问题描述】：

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

原来是这样的

更新：

示例：

   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;

【问题讨论】：

请添加代码示例
@Berendschot 是的，对不起，我忘记了。你现在可以检查一下吗

标签： javascript css reactjs material-ui

【解决方案1】：

有点晚了，不过可以用anchorOrigin={{vertical: 'bottom', horizontal: 'left}}；尽管如此...是的，旧版本的 material-ui 对样式来说是一种痛苦，menuStyle 只是将样式添加到深层嵌套的 div 中，而不是菜单本身。

【讨论】：

【解决方案2】：

自定义菜单位置

默认情况下，菜单将显示在（y 轴）下方，（x 轴）之后，不会与其触发器重叠。可以使用 xPosition (before | after) 和 yPosition (above | below) 属性更改位置。可以使用overlapTrigger 属性强制菜单与触发器重叠。

这是代码。。

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

【讨论】：