如何覆盖材料 Angular 组件 styles 中的 Sass 变量？

Question

I am searching for a whole now for result of my problem. In my company, I must style material design for our project, and this is so awkward that there is absolutely no way to style through sass variables (I mean, not only colours and fonts). I can't override lot of styles because of this impossible encapsulations etc. My work is so slow. If I could override just variables like from _button- base.scss it would be not that much frustrating... I can't use viewEncapsulation.none like in lot of suggestions.

I don't know Sass very well so maybe I don't see the result. How can it be possible to not styling by variables, there are all here in material sass files. I found only one answer like this:

.mat-button {
  @extend %mat-button-base;
}

but this doesn't work for me. Anyone has other solution?

Answer 1

You should the angular-material site: https://material.io/design/color/the-color-system.html#color-usage-and-palettes

Option 1: change the $mat-indigo, $mat-pink and $mat-red to material palettes of your choice.

@import '~@angular/material/theming';
@include mat-core();

$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);


$candy-app-theme: mat-light-theme((
  color: (
    primary: $candy-app-primary,
    accent: $candy-app-accent,
    warn: $candy-app-warn,  
  )
));


@include angular-material-theme($candy-app-theme);

Option2 : Override them by making your SCSS more specific.

Option3 : Use::ng-deep to override specific components.

PS You really should NOT use viewEncapsulation.none . That is the whole idea of angular which created encapsulated components.