Use 'Bootstrap' theme

Question

I am trying to change PrimeNG theme in an Angular 6 app with no success.

This is from angular.json - I am trying to use the "Bootstrap" theme:

...
styles": [
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeng/resources/themes/redmond/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
...

But the theme didn't change to "Bootstrap" style:

Answer 1

PrimeNg 曾经有一些免费主题。其中之一是 Bootstrap 主题。它与 Bootstrap 不同，只是具有类似 Bootstrap 的外观并且不需要 Bootstrap 作为依赖项。

在撰写此答案时，PrimeNG 6.1.0 已弃用所有免费主题，除了nova具有三个变体的主题nova-colored，nova-light以及nova-dark.

要应用 PrimeNG 免费主题，只需将这些文件导入您的style.css：

@import url("../node_modules/primeicons/primeicons.css");
@import url("../node_modules/primeng/resources/themes/nova-colored/theme.css");
@import url("../node_modules/primeng/resources/primeng.min.css");

堆叠闪电战演示

在旧版本的 PrimeNG 5.x 中，我们可以像这样应用 Bootstrap 主题：

@import url("../node_modules/font-awesome/css/font-awesome.min.css");
@import url("../node_modules/primeng/resources/themes/bootstrap/theme.css");
@import url("../node_modules/primeng/resources/primeng.min.css");

更新：

PrimeNG 6.1.0 发布后不再维护 PrimeNG 旧的免费主题：

6.1 之前的免费主题现已弃用，不再维护，因为它们已过时且由于实施而难以维护。在 6.1.0 中，无论是免费还是付费，提供的所有主题都将由 PrimeNG 主题设计师开发。这将帮助我们从一个中心位置维护所有主题。