时间戳

首页 > 解决方案 > 如何“防止”引导程序覆盖应用程序中的现有样式

css - 如何“防止”引导程序覆盖应用程序中的现有样式

问题描述

我在我的角度应用程序中使用 ng-bootstrap 来构建一个弹出窗口，看起来就像它的形象 我在我的正文中使用自定义字体，这些字体在 styles.scss 文件中定义为

$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 ;
}

如果我删除 styles.scss 中的引导导入，字体看起来微妙的黑色也会丢失我的弹出框样式喜欢这张图片

当我将 boostrap.scss 导入到 styles.scss 中时，文本变为粗体喜欢这张图片 ，但我的默认字体被 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>

关于如何防止引导程序覆盖我的正常字体的任何想法？

标签： cssangularbootstrap-4sassng-bootstrap

解决方案

如其他答案中所述。将引导程序与角度材料集成起来确实很困难。

由于引导样式已应用于身体：

我不得不像这样覆盖引导样式”

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

 body{
    font-family: TedNext, sans-serif;
  }
}

推荐阅读