Saltar al contenido

Panel de expansión de material angular 4

Haz todo lo posible por comprender el código bien antes de utilizarlo a tu trabajo si tdeseas aportar algo puedes dejarlo en la sección de comentarios.

Solución:

En vez de /deep/ Deberías usar ::ng-deep, que es un alias proporcionado por angular. Apoyo para /deep/ etc. ya se eliminó del navegador Chrome. Entonces, en tu ejemplo, eso sería:

::ng-deep .parametersPanel .mat-expansion-panel-body 
    padding: 0;

En tus style.css o el estilo de sus componentes, debe agregar el siguiente css:

/deep/ .parametersPanel .mat-expansion-panel-body 
    padding: 0;

Esto se debe a la encapsulación de vistas. Puede leer más sobre esto aquí: https://angular.io/guide/component-styles

Actualizar:

El uso de /deep/, ::ng-deep para modificar los estilos de los componentes de material ha quedado obsoleto. Ver este enlace.

Sin embargo, usando @angular/core^6.1.0 y @angular/material^6.4.6 Pude cambiar el estilo del panel de Expansión de Angular Material sin tener que agregar nada específico. Parece que ahora puede simplemente cambiar el estilo en el archivo css de sus componentes. Así que esto debería funcionar:

.mat-expansion-panel-body 
    padding: 0;

Puede leer aquí para obtener más información sobre la desaprobación de /deep/, ::ng-deep aquí.

Esto funciona al 100%.

Agregue esto dentro de su estilo.css:

.mat-expansion-panel-content > .mat-expansion-panel-body 
  padding: 0 !important;

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *