PrimeNG 未显示其网站上示例中的组件

Question

我似乎无法获得 selectButton、表格和其他组件样式，如下面的屏幕截图所示（如在他们的网站上）。 https://primeng.org/table
我不知道它是主题还是什么，但我尝试改变主题，但我似乎无法得到如下所示的效果（就像他们的例子）：

这是我的 angular.json:

 "styles": [
              "src/styles.scss",
              "node_modules/primeng/resources/themes/mira/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeflex/primeflex.css",
              "node_modules/primeicons/primeicons.css"
            ],

我使用的是 Angular 版本 18 和 primeng 17.18.12 包.json:

 "dependencies": {
    "@angular/animations": "^18.2.0",
    "@angular/common": "^18.2.0",
    "@angular/compiler": "^18.2.0",
    "@angular/core": "^18.2.0",
    "@angular/forms": "^18.2.0",
    "@angular/platform-browser": "^18.2.0",
    "@angular/platform-browser-dynamic": "^18.2.0",
    "@angular/router": "^18.2.0",
    "@fullcalendar/core": "^6.1.15",
    "@fullcalendar/daygrid": "^6.1.15",
    "@fullcalendar/timegrid": "^6.1.15",
    "chart.js": "^4.4.6",
    "file-saver": "^2.0.5",
    "moment": "^2.30.1",
    "primeflex": "^3.3.1",
    "primeicons": "^7.0.0",
    "primeng": "^17.18.12",
    "quill": "^2.0.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "xlsx": "^0.18.5",
    "zone.js": "~0.14.10"
  },

我想要与上面的按钮相同的主题和样式以及像 primeng 网站文档示例中那样的整体样式。帮助我需要更改主题还是什么！

Answer 1

你可以试试

"styles": [
          "src/styles.scss",
        ],

并在您的 styles.css 上添加以下行

@import "primeng/resources/themes/mira/theme.css";
@import "primeng/resources/primeng.css";
@import 'primeflex/primeflex.scss';
@import "primeicons/primeicons.css";

还考虑经营一家

npm upgrade