更改“md-menu”的Angular 2/4材质默认样式

Question

我正在尝试更改md-menu的默认Angular Material样式。问题是Angular Material动态生成元素，我无法从HTML中访问它们。

这是我的DOM：

这是我的组件HTML（md-menu生成该DOM）：

<md-toolbar color="primary">
  <h1>Logo</h1>
  <span class="spacer"></span>
  <img src="../../../images/avatar-default.png" class="avatar" [mdMenuTriggerFor]="userMenu" />

  <md-menu #userMenu="mdMenu">
    <button md-menu-item>{{username}}</button>
    <button md-menu-item>Log Out</button>
  </md-menu>
</md-toolbar>

我知道我可以使用div从全局样式访问.mat-menu-content {...}（在图片上选中），但它会影响具有此类的其他元素。而且我无法从组件CSS为此div设置样式，因为该元素在组件范围之外。所以我试图找到从组件CSS更改此元素样式的方法，而不会影响具有此类样式的其他元素。

如果有办法实施，请告诉我。

Answer 1

检查是否可以使用/deep/。

  

组件样式通常仅适用于组件中的HTML   自己的模板。

     

使用/deep/选择器强制样式向下穿过孩子   组件树到所有子组件视图中。 /deep/选择器   适用于任何深度的嵌套组件，它适用于两者   查看组件的子项和内容子项。

Doc

component.css：

/deep/ .mat-menu-content {
    background: skyblue !important;
    border-top: solid 1px black;
    border-bottom: solid 1px black;
}

/deep/ .mat-menu-item {
    padding: 0 0 0 0 !important;
}

demo

Answer 2

如下图所示Maybe this doc would help