PrimeNG's styles are not being applied even if my order is correct in angular.json file. "styles.scss" is overriding it

Question

I am using Prime NG in my Angular Application and I have some styles of my own too. I have integrated the priority order of my styles in angular.json file in the styles array. Though I am using the correct order, my custom styles are being applied first and not the prime ng's style.

I have a _reset-and-normalize.scss file which gives margin, padding and border as 0. This style is imported in my styles.scss file. Due to this, I'm not sure why, but my prime ng's styles are being overridden by my properties mentioned in _reset-and-normalize.scss even if the order is perfectly proper in angular.json.

angular.json

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ff-cms",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.svg",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/primeng/resources/themes/lara-light-indigo/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/summernote/dist/summernote-lite.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/summernote/dist/summernote-lite.min.js"
            ]
          },
          "configurations": {
            "production": {
              "buildOptimizer": true,
              "optimization": true,
              "vendorChunk": false,
              "extractLicenses": true,
              "sourceMap": true,
              "namedChunks": true,
              "outputHashing": "all",
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "5mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "1mb",
                  "maximumError": "1mb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            },
            "preprod": {
              "buildOptimizer": true,
              "optimization": true,
              "vendorChunk": false,
              "extractLicenses": true,
              "sourceMap": true,
              "namedChunks": true,
              "outputHashing": "all",
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "5mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "1mb",
                  "maximumError": "1mb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.preprod.ts"
                }
              ]
            },
            "stage": {
              "buildOptimizer": true,
              "optimization": true,
              "vendorChunk": false,
              "extractLicenses": true,
              "sourceMap": false,
              "namedChunks": false,
              "outputHashing": "all",
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "5mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "1mb",
                  "maximumError": "1mb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.stage.ts"
                }
              ]
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.local.ts"
                }
              ]
            }
          },
          "defaultConfiguration": "production"
        },

styles.scss

/* You can add global styles to this file, and also import other style files */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Helper CSS */
@import 'assets/css/_common.scss';
@import 'assets/css/_typography.scss';
@import 'assets/css/_grid.scss';
@import 'assets/css/_pattern.scss';
@import 'assets/css/_variables.scss';
@import 'assets/css/_reset-and-normalize.scss';

Answer 1

Try to add the import directly in your global style file, also install primeflex (CSS library used from PrimeNg):

Style.scss:

$gutter: 1rem; //for primeflex grid system

@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.min.css";
@import "primeflex/primeflex.scss";

/*
 Your global styles
*/

Then delete the import from angular.json's style array.

That worked for me