1

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

youeye
  • 737
  • 1
  • 7
  • 31
  • your question is very general, so it's hard to answer it.. but have you tried override the style with `!important` ? for example `color: red !important;` – Eli Porush Jan 13 '22 at 06:37
  • yes, but for those styles its not getting overridden. – youeye Jan 13 '22 at 06:41

2 Answers2

0

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.

Juan Vicente Berzosa Tejero
  • 2,786
  • 2
  • 5
  • 15
0

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

TotallyNewb
  • 3,884
  • 1
  • 11
  • 16