Почему Bootstrap css перекрывается angular материал на заказ css - PullRequest
Новая
       7

Почему Bootstrap css перекрывается angular материал на заказ css

0 голосов
/ 12 марта 2020

Вот мой заказ css на Angular Материал mat-table, который размещен на styles.css. 

.mat-column-action1 {
  min-width: 20px;
}

Мой col определение выглядит 

<ng-container matColumnDef="action1">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let e; let i = index;">
        <span *ngIf="i == mouseOverIndex" (click)="edit(e.id)"><i class="fas fa-pen"></i></span>
    </td>
</ng-container>

Это работает как ожидалось. Теперь я добавил @import "../lib/bs4.min.css"; в первой строке styles.css. С тех пор выше пользовательский css из .mat-column-action1 не работает должным образом.

Что я пробовал?

Перемещен оператор @import в конце строки в styles.css, как показано ниже. Но целые bs4.css стили не работают. 

.mat-column-action1 {
  min-width: 20px;
}

@import "../lib/bs4.min.css";

Добавлено ::ng-deep, но без эффекта. 

::ng-deep .mat-column-action1 {
  min-width: 20px;
}

Добавлено !important; в ширину 

.mat-column-action1 {
  min-width: 20px !important;
}

Что еще мне здесь не хватает, чтобы работать с таблицами матов bs4.min.css и Angular Material.

Примечание: я использую таблицы mat-table и bs4 в своих компонентах.

Обновление для @ Joel

In styles.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "../lib/bs4.min.css";
@import "../lib/mdb.min.css";

 table {
    width: 100%;
  }

  .mat-header-cell {
    font-size: 14px;
  }

.mat-column-action1 {
  min-width: 20px;
}

In angular.json

"styles": [
              "src/styles.css"
            ],

1 Ответ

0 голосов
/ 12 марта 2020

Если вы используете как Bootstrap, так и Material, у вас будут проблемы - Bootstrap добавляет стили непосредственно к элементам HTML, поэтому он будет связываться с компонентами Material, использующими эти элементы HTML, т.е. .

По сути, у вас есть два варианта, если вам действительно нужно использовать оба:

  1. Использовать таблицу матов без элемента HTML <table>. Вы можете прочитать больше об этом здесь (см. Таблицы с дисплеем: раздел flex - я связался с ним напрямую, но кажется, что страница «перепрыгивает» после загрузки некоторых данных).
  2. Подготовьте собственный пакет Bootstrap, исключая некоторые таблицы стилей, например файл _tables.scss, чтобы он не переписывал ваши стили.
...