Overriding Angular Material components

Question

I am trying to over ride the styles of font family so in that process i am able to over ride text fonts easily but i am not able to over ride the Angular Material components like input text, mat-table, mat-header, mat-cell, mat-row, etc. So my question is how can i over ride these?

Thanks

Answer 1

Try doing it in this form, in the scss file of the HTML where are using the material component (for intance, for

:host ::ng-deep {

  label {
    display: block;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: #9296a5 !important;
    line-height: 17px !important;
    font-family: "Roboto" !important;
    margin-bottom: 0.2rem !important;
  }

  .index-text-input {
    max-width: 100%;
  }

  .mat-table {
    background:red;
  }

  .mat-cell-input {
    background:blue;
  }

}

It's just an example. You have to select the element and inspect the name wich angular material give in your html, in order to know the exact name you have to use for overriding the specific element.

Answer 2

You can do it globally by applying different typograpghy. Everything is thoroughly documented in a guide in the official docs here.