Блог

В моем приложении angular 7 я использую material design. В моем файле global styles.css у меня есть некоторый стиль для компонентов материала, а именно для значков mat. Однако мои настройки переопределяются собственным стилем material.

Использование !important, очевидно, работает, но я думаю, что есть более естественный способ, я просто не могу в нем разобраться. В chrome dev tools мой селектор классов CSS просто отображается под селектором material design, и я думаю, это означает, что он просто был применен раньше, и, таким образом, material style имеет приоритет, поскольку они оба являются селекторами классов и должны иметь одинаковый приоритет (во всяком случае, я так понимаю).

Соответствующая запись из styles.css:

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

Как это отображается в chrome dev tools:

 .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, что я хочу, чтобы мои стили заменяли стили материалов?

РЕДАКТИРОВАТЬ: добавлен HTML, где значки mat:

 <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>
  

Это специфическая проблема. Вы можете изменить класс mat-icon напрямую, использовать id, который имеет более высокую специфичность, или использовать комбинированный селектор, такой как

 .icon-group > .icon