Как переопределить стили угловых материалов с глобальными стилями .css, избегая! Важным? - PullRequest
Новая
       23

Как переопределить стили угловых материалов с глобальными стилями .css, избегая! Важным?

2 голосов
/ 28 марта 2019

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

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

Соответствующая запись от 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-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>

1 Ответ

1 голос
/ 29 марта 2019

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

.icon-group > .icon
...