Question

在我的angular 7应用程序中，我正在使用材质设计。在我的全局styles.css文件中，我为材质组件（即垫图标）设置了一些样式。但是，我的设置被材质自己的样式覆盖。

使用！important显然有效，但是我认为有一种更自然的方法，我只是想不通。在chrome dev工具中，我的CSS类选择器仅显示在材质设计选择器的下方，我认为这意味着它只是应用得较早，因此材质样式优先，因为它们都是类选择器，并且应该具有相同的优先级（无论如何，这就是我的理解。

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样式划掉了。

如何使样式表具有优先级？我能以某种方式指定样式表的加载顺序，还是明确告诉我我希望样式取代材质样式的角度？

编辑：添加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

如何在避免！important的同时使用global.css覆盖Angular材质样式？

1 个答案: