styles.scss 中的角度样式并不总是被应用

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

也许材质按钮的 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

另一个解决方案是创建您自己的按钮组件来包装材质按钮。您可以将自定义 CSS 放在那里，并可以在应用程序中轻松地重用它。