cssangularsassangular-materialfrontend

mat-grid-tile-content how to edit the style


I would edit the style of this class 'mat-grid-tile-content'

this is my code:

 <mat-grid-tile [colspan]="3" [rowspan]="2">
    <mat-list role="list">
         <mat-list-item role="listitem">Item 1</mat-list-item>
         <mat-list-item role="listitem">Item 2</mat-list-item>
         <mat-list-item role="listitem">Item 3</mat-list-item>
         </mat-list>
 </mat-grid-tile>

I tried to access to the class in this way, but doesn't work:

::ng-deep mat-grid-tile-content {
  display: flex !important;
  align-items: start !important;
  justify-content: flex-start !important;
  flex-direction: column !important;
}

Solution

  • You need to use . when you are searching for a class in your selector:

    ::ng-deep {
       .mat-grid-tile-content {
          display: flex !important;
          align-items: start !important;
          justify-content: flex-start !important;
          flex-direction: column !important;
      }
    }
    

    or

    ::ng-deep .mat-grid-tile-content {
      display: flex !important;
      align-items: start !important;
      justify-content: flex-start !important;
      flex-direction: column !important;
    }