Как 'предотвратить' bootstrap от переопределения существующих стилей в приложении - PullRequest
Новая
       119

Как 'предотвратить' bootstrap от переопределения существующих стилей в приложении

1 голос
/ 05 августа 2020

Я использую ng- bootstrap в моем angular -app, чтобы создать всплывающее окно, которое выглядит примерно как its image I am using custom fonts in my body which are defined in styles.scss file as

$r-typography: mat-typography-config(
  $font-family: 'TedNext, sans-serif'
);
$f-typography: mat-typography-config(
  $font-family: 'Yolo, sans-serif'
);
html[realm=r] {
  @include mat-core($r-typography);
  box-sizing: border-box;
  font-family: TedNext, sans-serif ;
}

html[realm=f] {
  @include mat-core($f-typography);
  box-sizing: border-box;
  font-family: Yolo, sans-serif ;
}

if I remove the bootstrap import in styles.scss the font looks subtle black and I also lose my styling for the popover like this image

when I import the boostrap.scss into styles.scss the text becomes bold like this image but my default fonts are overridden by bootstrap как это

Вот код кнопки со значком mat-icon 

<button mat-icon-button matSuffix
                      popoverClass="popoverBackground"
                      ngbPopover="{{ 'PAYMENT.CREDIT_CARD.CVV_INFORMATION' | translate }}"
                      container="#checkId"
                      tabindex="-1"
                      type="button"
                      onclick="this.blur()"
                      [autoClose]="true"
                     class="cvv-info-button"
              >
                <mat-icon>info</mat-icon>
              </button>

Есть идеи, как я могу предотвратить bootstrap переопределение моих обычных шрифтов?

Ответы [ 3 ]

1 голос
/ 05 августа 2020

Правило. css, которое является наиболее конкретным. c - это правило, которое получает приоритет. элементы.

Например:

Учитывая это html: 

<div class="base">
   <div class="child">
      text
   </div>
</div>

И это. css правила: 

.child {
   color: red
}

.base .child {
   color: black
}

Тогда подробнее c одно будет вторым, поэтому текст будет черным. Вы можете переопределить его, указав первому правилу дополнительные c селекторы: 

.black div.child {
   color: red
}
0 голосов
/ 07 августа 2020

Как упоминалось в других ответах. Действительно сложно интегрировать bootstrap с материалом angular.

Поскольку стили bootstrap применялись к телу:

Мне пришлось переопределить стили bootstrap, например это "

html[realm=r] {
  @include mat-core($r-typography);
  box-sizing: border-box;
  font-family: TedNext, sans-serif ;

 body{
    font-family: TedNext, sans-serif;
  }
}
0 голосов
/ 07 августа 2020

По сути, смешивание Angular Материала и Bootstrap CSS вызовет много боли. Я настоятельно рекомендую избегать этого. Вот более подробное обсуждение смешивания Angular материала и Bootstrap CSS.

...