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

我正在尝试更改md-menu的默认角形材质样式。问题是Angular Material动态生成元素，我无法从我的HTML中访问它们。更改角度2/4“md-menu”的材质默认样式

这里是我的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中找到改变这个元素样式的方式，而不会影响具有这种样式的其他元素。

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

来源

2017-07-09 Commercial Suicide

要应用到'MD-menu'什么样风格的变化？ – Nehal

@Nehal，首先删除填充，然后改变背景颜色，可能是别的... –

检查是否使用/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

来源

2017-07-09 02:28:46 Nehal

完美的作品，非常感谢！ –

/deep /现已弃用。在Angular中，ViewEncapsulation.Emulated是默认选项，这意味着它试图通过向主机元素添加代理键来缩小影响的范围等等。一种选择可以是在CSS下面添加。但是，请注意，这个深度也很快就会被弃用。必须等待才能知道替代方案！ https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep :: ng-deep .mat-menu-content {} – nsk

在下面的图片描述，Maybe this doc would help

来源

2017-07-09 02:13:50 UnclePojo

似乎它是一个答案。但是我对Angular完全陌生，请你举个例子，如何使用这个'@ Input'？ –

@商业自杀对不起，迟到的答案，楼上的答案很棒，这是一个替代[演示]（https://plnkr.co/edit/i3TO4YtRj95gsLUClTVz?p=preview） – UnclePojo

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

回答

相关问题