매트 메뉴 스타일을 설정하십시오

Question

임 씨는 이것으로 많은 문제를 겪고 있으며 명백한 해결책이 작동하지 않거나 잘못된 것을하고 있습니다 (아마도 후자 일 것입니다).

내 mat-menu과 mat-menu-item의 스타일을 원하는, 필자가이 일을 시도 :

::ng-deep .mat-menu{ 
    background-color:red; 
} 

그러나이 작업을 나던 내 메뉴

<mat-menu #infoMenu="matMenu"> 
    <button mat-menu-item> 
    <mat-icon>dialpad</mat-icon> 
    <span>Resume</span> 
    </button> 
    <button mat-menu-item> 
    <mat-icon>voicemail</mat-icon> 
    <span>Portfolio</span> 
    </button> 
    <button mat-menu-item> 
    <mat-icon>notifications_off</mat-icon> 
    <span>References</span> 
    </button> 
    <button mat-menu-item> 
    <mat-icon>notifications_off</mat-icon> 
    <span>Contact</span> 
    </button> 
</mat-menu> 

I이 (아무것도 abornomal)처럼 보인다 또한 시도/깊은 /하지만 나는 작동하지 말아야하고 실제로 앵귤러 4에서 감가 상각해야하지만, 그것을 테스트했는지, 나는이 시점에서 요소를 스타일하는 방법을 모르겠다.

Answer 1

app.component.ts

import { Component, ViewEncapsulation ... } from '@angular/core'; 

@Component({ 
    ... 
    encapsulation: ViewEncapsulation.None 
}) 

export class AppComponent { 
    constructor() { } 
} 

my.component.css

.mat-menu-content { 
    background-color: 'red' !important; 
} 

나는 일반적으로 높이와 오버 플로우 CSS 스타일을이를 사용하지만 일반적인 생각은 여전히해야

배경색을 의미합니다. 백그라운드 색상으로 다른 오버레이 div가있을 수 있지만 이러한 방식으로 .mat-menu-<item name> css로 액세스 할 수 있어야하며 동일한 방식으로 하위 항목을 변경해야합니다.

Answer 2

모두 CSS에서 원래 background-color 및 mouseover 색상을 정의

.mat-menu-item { 
    color: blue !important; 
} 

button.mat-menu-item{ 
    background-color: white; 
} 

button.mat-menu-item:hover { 
    background-color: blue; 
    color: #fff !important; 
}