更改“md-menu"的 Angular 2/4 Material 默认样式 [英] Change Angular 2/4 Material default styles for "md-menu"

问题描述

我正在尝试更改 md-menu 的默认 Angular Material 样式.问题是 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:

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 Material 默认样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！