如何设置 PrimeNG 主题？答案

【问题标题】：How to set PrimeNG theme?如何设置 PrimeNG 主题？
【发布时间】：2020-08-21 13:03:07
【问题描述】：

我在尝试了解如何设置 PrimeNG 主题时发现了一些问题。如果我去这里： https://www.primefaces.org/primeng/showcase/#/table/crud

可以看到默认设置的主题是bootstrap4-light-blue。

好的，如何在我的项目中设置这个主题？我正在使用 PrimeNG，但在我的项目中找不到主题。

我必须以某种方式安装吗？我错过了什么？

EDIT-1：进入我的文件夹的PrimeNg主题文件夹 (/home/developer/Documents/Angular-WS/color_patch/node_modules/primeng/resources/themes) 我只找到这几个主题？为什么？在我看来，很多主题都缺失了。不是吗？特别是与 BootStrap 相关的主题似乎不存在

【问题讨论】：

标签： angular primeng

【解决方案1】：

现在显示的它们是primeng 10的新主题基础，在撰写此答案时目前仍在开发中(PrimeNG 10.0.0-rc.4-SNAPSHOT by PrimeTek)

所有这些主题都是作为primeng的一部分安装的css文件，您有两种方法来包含这些主题

angular.json

"styles": [
                "src/styles.css",
                "node_modules/primeng/resources/themes/nova-light/theme.css", ?
                "node_modules/primeng/resources/primeng.min.css",
                "node_modules/primeflex/primeflex.css",
                "node_modules/primeicons/primeicons.css",
                "node_modules/quill/dist/quill.snow.css"
            ],

或者通过在全局 scss 文件中导入 css 文件

global.scss

@import "primeicons/primeicons.css";
@import "primeng/resources/primeng.min.css";
@import "primeng/resources/themes/nova-dark/theme.css"; ?

这些是primeng包中的主题文件

primeng/resources/themes/**theme name**/theme.css

【讨论】：

我编辑了我的原始帖子，包括细节，因为在我看来我只有几个主题。为什么？
是的，以前的版本没有那么多的主题，你可以使用新版本或等到它完全发布（primeng 10）最大的更新新主题和更好的设计
那么你认为我使用的是旧版本的 PrimeNG 吗？
是的，也许您使用的是版本 9，但您可以在新版本 (10) 发布时更新