Estoy teniendo muchos problemas con esto, y las soluciones aparentes no funcionan o estoy haciendo algo mal (probablemente lo último).

Quiero diseñar mi mat-menu y el mat-menu-item, he intentado hacer esto:

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

Pero no funciona, mi menú se ve así (nada anormal)

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

También probé / profundo / pero sé que no debería funcionar y, de hecho, debería depreciarse en Angular 4, pero lo hice para probar, no estoy seguro de cómo diseñar los elementos en este momento.

4
Cacoon 19 oct. 2017 a las 03:05

3 respuestas

La mejor respuesta

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

Por lo general, uso esto para diseñar la altura y el desbordamiento de CSS, pero la idea general aún debe significar el color de fondo. Tenga en cuenta que puede haber otros divs superpuestos con colores de fondo, pero debería poder acceder a ellos de esta manera mediante su .mat-menu-<item name> CSS y cambiar los elementos secundarios de la misma manera.

13
Z. Bagley 19 oct. 2017 a las 00:32

Defina el color original background-color y mouseover en el CSS:

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

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

button.mat-menu-item:hover {
    background-color: blue;
    color: #fff !important;
}
6
mmvsbg 26 feb. 2018 a las 13:14

Manera más fácil Si desea cambiar su componente solo sin afectar a otros componentes, debe agregar una clase al menú.

<mat-menu #infoMenu="matMenu" class="customize"></mat-menu>

Luego, diseñe su menú con :: ng-deep.

::ng-deep .customize {
  background: red;
}

Voila !! Su personalización no afectará a otros componentes.

Otra forma: puedes agregar backdropClass al menú.

 <mat-menu #infoMenu="matMenu" backdropClass="customize"></mat-menu>

Luego agregue la clase de estilo CSS con + * en su styles.css

.customize+* .mat-menu-panel {
  background: red;
}

Esto también se logra sin afectar a otros, pero agregar css en styles.css puede ser un poco incómodo.

11
Md. Rafee 19 ago. 2019 a las 07:04