更改角度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」的材質默認樣式

回答

相關問題