How do you deal with div with mat-card-header-text in an material2 card?

Question

I can\'t seem to wrap my head around having this container in an md card.

In my material cards, I have this:

 &         


        
      

Answer 1

This extra div is actually quite annoying. As it turns out though, you can use shadow-piercing to apply a style to it without changing the CSS emulation mode. You can do this using the ::ng-deep combinator as such:

::ng-deep .mat-card-header-text {
  /* CSS styles go here */
  margin: 0px; // for example to remove the margin
}

You can also just replace the whole header with your own CSS classes instead:

  

    

      Your title here
    
  
  
    Stuff goes here