html - style.scss 中的 Angular 样式并不总是被应用

Question

我在基于 Angular 12 的网站上为不同的 mat-buttons 添加了一些 CSS 属性。
为了不意外地将这些属性应用到所有 mat-buttons，而只应用到我想要应用它们的那些，我向按钮添加了一个类并使用它来设置 CSS 属性，如下所示:
组件html文件:

<a class="menu-button" mat-button>
  <img class ="menu-button-image" src="assets/images/example.png">
  <div>Example text</div>
</a>

组件 scss 文件:

.menu-button {
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1.5;
}

.menu-button-image {
  width: 200px;
  height: 200px;
}

只要我将 css 代码保留在组件的 scss 文件中，这就可以正常工作，但是因为我不想在要应用这些属性的每个组件中都将此作为冗余代码，所以我将它移到了样式中。 scss 文件代替。这样做之后，只应用了一些属性，但有些属性似乎被覆盖/忽略:

为什么会发生这种情况，我该如何预防？

Answer 1

可能 Material 按钮的 css 是在您的 style.scss 类之后加载的，并且选择器具有相同的重要性，因此稍后加载的将赢得并覆盖两个类中的定义。
什么应该起作用，例如通过组合类来增加特定定义的重要性

.mat-button {
  &.menu-button {
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1.5;
 }
}

.mat-button.menu-button将优先于 .mat-button另一种解决方案是创建您自己的按钮组件来包装 Material 按钮。您可以将自定义 css 放在那里，并且可以在应用程序中轻松重用它。