How to overwrite angular 2 material styles?

Question

I have this select in angular material:

Its code :

Answer 1

I was facing the same issue with Angular Material, I inspected the select element, checked its classes and tried to overwrite the css rules for material css classes , even tried !important flag for style rules. But it was not working.

Moving all such rules from component to index.html worked for me.

.mat-select-value,
    .mat-option-text,
    .mat-standard-chip,
    .mat-input-element,
    .mat-menu-item {
         color: #666 !important;
         font-size: 13px !important;
     }
}