Cannot change the .mat-mdc-table styles

Question

I have mat-table from the Angular Material library and am trying to change its styles, here's my css:

@media only screen and (max-width: 665px){
  .mat-mdc-table thead {
          display: none !important;
    }
}

For some reason the thead element does not apply the "display: none" property, however if I try to change its styles in the devtool it works fine

(DevTools)

How can I access the thead and the others elements of the .mat-mdc-table in my stylesheet?

Html

Answer 1

Be more specific, including a "longer" path to the element; for example, like so:

@media only screen and (max-width: 665px){
  main > div > app-chiefs-table > form > div > .mat-mdc-table thead {
          display: none !important;
    }
}

Answer 2

just try to target the element not the class:

@media only screen and (max-width: 665px){
  .mat-mdc-table thead {
          display: none !important;
    }
}