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

问题描述：

我正在尝试将默认的Angular Material样式更改为md-menu.问题在于Angular Material是动态生成元素的，而我无法从HTML对其进行访问.

I'm trying to change default Angular Material styles of md-menu. The problem is the Angular Material generates elements dynamically and I can't get access to them from my HTML.

这是我的DOM:

这是我的组件HTML(md-menu生成该DOM):

And here is my component HTML (md-menu generates that 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更改此元素的样式，而又不影响具有这种样式的其他元素.

I know that I can get access to that div (selected on the picture) from global styles using .mat-menu-content {...}, but it will affect other elements with such classes. And I'm unable to set styles to this div from component CSS, because the element is outside component scope. So I'm trying to find the way to change styles of this element from component CSS and without affecting other elements with such style.

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

If there is a way to implement it, please, let me know.

答

检查是否使用/deep/是您的选择.

Check if using /deep/ is an option for you.

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

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

使用/deep/选择器将样式向下强制通过子项组件树进入所有子组件视图. /deep/选择器适用于任何深度的嵌套组件，并且适用于查看该组件的子代和内容子代.

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.

文档

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;
}

演示

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

相关推荐