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

Question

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

样式.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;
}

Answer 1

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

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