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

Question

我正在尝试在带有 Nova Light 主题的角度应用程序上使用 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;
}

Answer 1

修改 CSS

body

规则，通过添加

body .p-component

:

来覆盖 PrimeNG 的默认字体规则

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

Answer 2

你可以把这段代码放在Style.css中：

body,
body .p-component {
   font-size: 11px !important;
}

.p-component, .p-component *{
   font-size: 11px !important;
 }

Answer 3

Primeng 使用 css 变量作为字体。如果你在 style.scss 中设置如下，那么它就会起作用

--font-family: "Open Sans";

你的新CSS将是：

/* 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";

--font-family: "Open Sans";

body
{
  margin: 0;
  background-color: #F7F6F3;
}