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

【问题标题】：How to 'prevent' bootstrap from overriding the existing styles in the application如何“防止”引导程序覆盖应用程序中的现有样式
【发布时间】：2020-11-26 01:27:15
【问题描述】：

我在我的 angular-app 中使用 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 中时，文本变为粗体但我的默认字体被引导程序覆盖

这是带有 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>

知道如何防止引导程序覆盖我的正常字体吗？

【问题讨论】：

如果其中一个答案对您有用，您能接受吗？谢谢，愉快的编码:)

标签： css angular bootstrap-4 sass ng-bootstrap

【解决方案1】：

如其他答案中所述。将 bootstrap 与 angular material 集成起来真的很困难。

因为引导样式被应用到身体上：

我必须像这样覆盖引导样式“

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

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

【讨论】：

【解决方案2】：

基本上，混合使用 Angular Material 和 Bootstrap CSS 会带来很多痛苦。我强烈建议避免它。这里有一个更深入的discussion about mixing Angular Material and Bootstrap CSS。

【讨论】：

【解决方案3】：

最具体的 .css 规则是获得优先级的规则。

请确保您的自定义 .css 规则更适合您的元素。

例如：

鉴于此 html：

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

而这个 .css 规则：

.child {
   color: red
}

.base .child {
   color: black
}

然后更具体的是第二个，因此文本将是黑色的。您可以通过给定第一条规则更具体的选择器来覆盖它：

.black div.child {
   color: red
}

【讨论】：