如何在 Material Angular 组件样式中覆盖 Sass 变量？答案

【问题标题】：How can I override Sass variables in Material Angular component styles?如何在 Material Angular 组件样式中覆盖 Sass 变量？
【发布时间】：2021-03-31 16:37:57
【问题描述】：

我现在正在寻找一个整体来寻找我的问题的结果。在我的公司，我必须为我们的项目设计材料设计，这太尴尬了，绝对没有办法通过 sass 变量（我的意思是，不仅仅是颜色和字体）来设置样式。由于这种不可能的封装等，我无法覆盖很多样式。我的工作太慢了。如果我可以只覆盖来自 _button-base.scss 之类的变量，那就不会那么令人沮丧了……我不能像在很多建议中那样使用 viewEncapsulation.none。

我不太了解 Sass，所以也许我看不到结果。怎么可能不按变量进行样式设置，材料 sass 文件中都有。我只找到了一个这样的答案：

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

但这对我不起作用。谁有其他解决方案？

【问题讨论】：

标签： angular sass angular-material material-design scss-mixins

【解决方案1】：

您应该使用 angular-material 网站： https://material.io/design/color/the-color-system.html#color-usage-and-palettes

选项 1：将 $mat-indigo、$mat-pink 和 $mat-red 更改为您选择的材质调色板。

@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);

选项2：通过使您的 SCSS 更具体来覆盖它们。

选项3：使用 ::ng-deep 覆盖特定组件。

附：你真的不应该使用viewEncapsulation.none。这就是创建封装组件的 Angular 的全部思想。

【讨论】：

感谢您的回答。选项 1 仅与颜色有关，但我可以设置边框、高度等样式。我尝试使用 ng-deep 制作样式并且更具体，但它并不总是有效，我一直在浪费时间搜索越来越具体的选择器。 :(
你为什么要改变材料？他们的团队花费大量时间和金钱来创造非常好的东西。我建议，如果您必须更改某些内容，请将其保持在最低限度。你有一个例子html和css。这将帮助我帮助你