css - 如何在避免 !important 的同时使用全局 styles.css 覆盖 Angular Material 样式？

Question

在我的 Angular 7 应用程序中，我使用的是 Material 设计。在我的全局 styles.css 文件中，我有一些 Material 组件的样式，即垫子图标。但是，我的设置被 Material 自身的样式覆盖了。

使用 !important 显然有效，但我认为有更自然的方法，我只是想不出来。在 chrome 开发工具中，我的 CSS 类选择器只是出现在 Material 设计选择器的下方，我认为这意味着它只是更早地应用，因此 Material 样式优先，因为它们都是类选择器并且应该具有相同的优先级(无论如何，这是我的理解)。

styles.css 中的相关条目:

.icon {
  display: inline-block;
  height: 30px;
  width: 30px;
  margin: 0 auto;
  text-align: center;
  vertical-align: middle;
}

它在 chrome 开发工具中的显示方式:

.mat-icon {
    background-repeat: no-repeat;
    display: inline-block;
    fill: currentColor;
    height: 24px;
    width: 24px;
}

.icon {
    height: 30px;
    width: 30px;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
}

宽度和高度在我的 .icon 样式中被简单地划掉了。

如何使我的样式表具有优先级？我能否以某种方式指定样式表加载的顺序，或者明确告诉 Angular 我希望我的样式接管 Material 样式？

编辑:在 mat 图标所在位置添加了 HTML:

<mat-toolbar color="primary">
  <div fxFlex fxLayout>
    <mat-toolbar-row fxFlex fxLayout fxLayoutGap="20px" class="navigation-items icon-group">
      <span>
        <a routerLink="/">
          <mat-icon class="icon">home</mat-icon>
          <span class="label">Home</span>
        </a>
      </span>
      <span>
        <a routerLink="/product">
          <mat-icon class="icon">bubble_chart</mat-icon>
          <span class="label">Product</span>
        </a>
      </span>
      <span>
        <a routerLink>
          <mat-icon class="icon">widgets</mat-icon>
          <span class="label">Expedition</span>
        </a>
      </span>
      <span class="spacer"></span>
      <span>
        <a routerLink (click)="logout()">
          <mat-icon class="icon">input</mat-icon>
          <span class="label">LogOut</span>
        </a>
      </span>
    </mat-toolbar-row>
  </div>
</mat-toolbar>

Answer 1

这是一个特异性问题。可以直接修改mat-icon类，使用特异性更高的id或者使用组合选择器，如

.icon-group > .icon