PrimeNG 主题字体覆盖 Angular 应用程序字体答案

【问题标题】：PrimeNG theme font overwriting Angular application fontPrimeNG 主题字体覆盖 Angular 应用程序字体
【发布时间】：2020-07-27 23:28:02
【问题描述】：

我正在尝试在我的带有 Nova Light 主题的 Angular 应用程序上使用 PrimeNG。我添加了依赖项并将theme.css 文件添加到styles.scss 文件中，如下所示。这是问题所在，尽管在styels.scss 文件中指定了字体，PrimeNG 主题仍会覆盖我的应用程序字体

styles.scss

/* You can add global styles to this file, and also import other style files */

//PrimeNg theme and libraries
@import "~primeicons/primeicons.css";
@import "~primeng/resources/themes/nova-light/theme.css";
@import "~primeng/resources/primeng.min.css";

@import  "~bootstrap/scss/bootstrap.scss";
$fa-font-path: "~font-awesome/fonts";
@import  "~font-awesome/scss/font-awesome.scss";


//@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "~@ng-select/ng-select/themes/material.theme.css";

body
{
  margin: 0;
  font-family: "Open Sans", sans-serif;
  background-color: #F7F6F3;
}

【问题讨论】：

为什么要使用带角材料的primeng？？
我正在使用 PrimeNG 表
覆盖它的 CSS，使用 body {font-family: "Open Sans", sans-serif;}
我确实做到了。请参阅我的styles.scss 文件。它没有工作

标签： angular bootstrap-4 primeng angular-components

【解决方案1】：

修改您的 CSS body 规则以通过添加 body .p-component 来覆盖 PrimeNG 的默认字体规则：

body,
body .p-component
{
  margin: 0;
  font-family: "Open Sans", sans-serif;
  background-color: #F7F6F3;
}

【讨论】：