css - PrimeNG not showing components like in the examples on their website - Stack Overflow

admin管理员组

文章数量:1122846

I cant seem to get the selectButton, table and other component styles like in the screenshot below (like on their website).
I dont know if its the theme or what, but I've tried to change the themes up and I cant seem to get this look like below (like their exmaples):

So this is my 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"
            ],

And I'm on angular version 18 and primeng 17.18.12 Package.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"
  },

I want the same theme and styling as the buttons above and overall styling like in the primeng website docs examples. HELP do I need to change the theme or what !

I cant seem to get the selectButton, table and other component styles like in the screenshot below (like on their website). https://primeng.org/table
I dont know if its the theme or what, but I've tried to change the themes up and I cant seem to get this look like below (like their exmaples):

So this is my 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"
            ],

And I'm on angular version 18 and primeng 17.18.12 Package.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"
  },

I want the same theme and styling as the buttons above and overall styling like in the primeng website docs examples. HELP do I need to change the theme or what !

• css
• angular
• sass
• primeng

Share Improve this question Follow asked Nov 21, 2024 at 16:06 Ismail BegIsmail Beg 2755 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

you can try

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

and on your styles.css add this lines

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

also considers running an npm upgrade

本文标签： cssPrimeNG not showing components like in the examples on their websiteStack Overflow