<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-panel-title>
      This is the expansion title
    </mat-panel-title>
    <mat-panel-description>
      This is a summary of the content
    </mat-panel-description>
  </mat-expansion-panel-header>

  <p>This is the primary content of the panel.</p>

</mat-expansion-panel>

¿Cómo cambio el área mat-panel-description (y solo el área mat-panel-description para que tenga un color de fondo diferente (por ejemplo, rojo)?

He probado varios estilos, pero parece que no puedo cambiar todo el fondo de ese fondo en particular (manteniendo el encabezado y el pie de página con sus colores originales).

Usando herramientas de desarrollo de Chrome, agregando un color de fondo a los siguientes .mat-expansion-panel-body funciona, por ejemplo:

.mat-expansion-panel-body {
  background-color: red;
}

Pero esto no funciona cuando trato de poner esto en mi hoja de estilo (o incluso a través del estilo en línea).

Nota: Esto también funciona cuando pongo esto en mi hoja de estilo global (styles.css), pero quiero evitar hacerlo si es posible.

Aquí hay una captura de pantalla donde tengo un círculo rojo que indica el área que quiero cambiar. color de fondo para.

Gracias

1
Jason Knowles 22 jun. 2020 a las 20:49

3 respuestas

La mejor respuesta

Agregue la propiedad de encapsulación en su decorador @Component

encapsulation: ViewEncapsulation.None

Y luego simplemente puede agregar estilos en su archivo css.

.mat-expansion-panel-body {
    background-color: red;
 }

Espero que esto ayuda!!

0
Suraj Gupta 22 jun. 2020 a las 18:13

En Angular use / deep / para cambiar los estilos del componente de material para forzar el estilo hacia abajo con la encapsulación emulada sin cambiar la encapsulación, así que intente esto:

/deep/ .mat-expansion-panel-body {
  background-color: red;
}

O :: ng-deep ya que / deep / está en desuso

::ng-deep .mat-expansion-panel-body {
  background-color: red;
}

enter image description here

1
Fateh Mohamed 22 jun. 2020 a las 18:25

Terminé resolviendo esto usando estilos globales, pero usando una clase específica de componente como padre (para evitar anular todas las apariciones de .mat-expansion-panel-body)

Elegí este método porque no quería usar ng-deep en desuso o meterme con la encapsulación de mi componente.

expansion-overview-example.component.html

<div class="expansion-overview-example">
  <p>This is the primary content of the panel.</p>
</div>

styles.css

.expansion-overview-example .mat-expansion-panel-body {
    background-color: red;
}
0
Jason Knowles 23 jun. 2020 a las 01:13