material-ui：無法設置圖標菜單樣式

Question

即使使用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;

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>