如何修改MD组件的外观

Question

在此代码中：

    <button md-icon-button [md-menu-trigger-for]="menu">
      <md-icon>more_vert</md-icon>
       <md-menu #menu="mdMenu">
        <button md-menu-item>Item 1</button>
        <button md-menu-item>Item 2</button>
      </md-menu>
    </button>

我想试试top: 67px;我试过这个：

 <md-menu style="top: 67px;" #menu="mdMenu">

或<button md-menu-item

但它没有用，我可以看到它是动态创建的，所以

<div id="cdk-overlay-0" class="cdk-overlay-pane" dir="ltr" style="left: 480px; top: 15px; pointer-events: auto;">

我在浏览器top

中修改了top: 67px;

它按预期工作。

我尝试在component.css文件中添加下一个文件：

.cdk-overlay-pane {
    top: 67px;
}

但它似乎不起作用。

我也用过它：

.test {
        top: 67px;
    }

并添加class，但它对我不起作用。

如何修改top在此组件中，修改.cdk-overlay-pane或其他方式。

对不起我的英语不好。我希望你能理解我。

Answer 1

您是否尝试过在文档中编写的内容：https://material.angular.io/components/component/menu？

  

自定义菜单位置

     

默认情况下，菜单将显示在（x轴）之后（y轴），并与其触发器重叠。可以使用x位置（之前|之后）和y位置（上方|下方）属性来更改位置。可以使用[overlapTrigger] =＆＃34; false＆＃34;强制菜单不与触发器重叠。属性。

使用[overlapTrigger]="false"应该有效，至少将y-position设置为below。