更改 Angular 2/4 Material 默认样式 "md-menu"

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>

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

如果有实现的方法，请告诉我。

Answer 1

如下图所示，Maybe this doc would help

Answer 2

检查使用 /deep/ 是否适合您。

Component styles normally apply only to the HTML in the component's own template.

Use the /deep/ selector to force a style down through the child component tree into all the child component views. The /deep/ selector works to any depth of nested components, and it applies to both the view children and content children of the component.

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

更改 Angular 2/4 Material 默认样式 "md-menu"

Change Angular 2/4 Material default styles for "md-menu"

javascript

css

angular-material

angular-material2

angular