Angular Component Styles Not Applied - Stack Overflow

admin管理员组

文章数量:1127991

I am working on an Angular application, and I am facing an issue where styles defined within a component are not being applied as expected. I have tried several troubleshooting steps, but none seem to have worked. The same setup works in a newly created Angular project, so I suspect there may be an issue with my existing project configuration.

1.Component Setup: I have a simple Angular component with inline styles that should change the color of an h1 element to red.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'cm-test',
  templateUrl: './testponent.html',
  styles: [
    `h1 { color: red !important; }`
  ],
  encapsulation: ViewEncapsulation.None  // I changed this to None
})
export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit(): void { }
}

2.HTML Template: The component's HTML template contains an h1 element:

<h1>test works!</h1>

3.Issue: The color: red !important style is not being applied to the h1 element. Despite trying the following solutions, the styles do not apply:

• Used ViewEncapsulation.None (to disable component-level scoping)
• Used ::ng-deep (deprecated but still functional)
• Tried color: red without !important
• Checked the browser developer tools to ensure the style isn't being overridden
• Tested with simple inline styles like h1 { color: red; }
• Cleared browser cache and rebuilt the Angular project
• Add Styles in separated files and import it within styleUrls

Here is angular.json

 {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "cli": {
    "packageManager": "yarn",
    "analytics": "***"
  },
  "newProjectRoot": "projects",
  "projects": {
    "control-panel": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "cm",
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "outputPath": "dist/",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/firebase-messaging-sw.js",
              "src/.htaccess",
              {
                "glob": "**/*",
                "input": "./node_modules/leaflet/dist/images",
                "output": "assets/"
              }
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
              "node_modules/ol/ol.css",
              "./node_modules/leaflet/dist/leaflet.css",
              {
                "input": "src/styles/combined-css/main-style.min.css",
                "bundleName": "mainLtrStyle",
                "inject": false
              },
              {
                "input": "src/styles/combined-css/main-style.rtl.min.css",
                "bundleName": "mainRtlStyle",
                "inject": false
              }
            ],
            "scripts": [
              "./node_modules/@popperjs/core/dist/umd/popper.min.js"
            ],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true
          },
          "configurations": {
            "staging": {
              "baseHref": "/alkaram-control-panel-staging/",
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.staging.ts"
                }
              ],
              "outputHashing": "all",
              "optimization": true,
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "production": {
              "baseHref": "/",
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all",
              "optimization": true,
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "development": {}
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "configurations": {
            "staging": {
              "browserTarget": "control-panel:build:staging"
            },
            "production": {
              "browserTarget": "control-panel:build:production"
            },
            "development": {
              "browserTarget": "control-panel:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-builders/custom-webpack:extract-i18n",
          "options": {
            "browserTarget": "control-panel:build"
          }
        },
        "test": {
          "builder": "@angular-builders/custom-webpack:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/firebase-messaging-sw.js",
              "src/.htaccess",
              {
                "glob": "**/*",
                "input": "./node_modules/leaflet/dist/images",
                "output": "assets/"
              }
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
              "node_modules/ol/ol.css",
              "./node_modules/leaflet/dist/leaflet.css",
              {
                "input": "src/styles/css/main-style.min.css",
                "bundleName": "mainLtrStyle",
                "inject": false
              },
              {
                "input": "src/styles/css/main-style.rtl.min.css",
                "bundleName": "mainRtlStyle",
                "inject": false
              }
            ],
            "scripts": [
              "./node_modules/@popperjs/core/dist/umd/popper.min.js"
            ]
          }
        }
      }
    }
  }
}````

I am working on an Angular application, and I am facing an issue where styles defined within a component are not being applied as expected. I have tried several troubleshooting steps, but none seem to have worked. The same setup works in a newly created Angular project, so I suspect there may be an issue with my existing project configuration.

1.Component Setup: I have a simple Angular component with inline styles that should change the color of an h1 element to red.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'cm-test',
  templateUrl: './test.component.html',
  styles: [
    `h1 { color: red !important; }`
  ],
  encapsulation: ViewEncapsulation.None  // I changed this to None
})
export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit(): void { }
}

2.HTML Template: The component's HTML template contains an h1 element:

<h1>test works!</h1>

3.Issue: The color: red !important style is not being applied to the h1 element. Despite trying the following solutions, the styles do not apply:

• Used ViewEncapsulation.None (to disable component-level scoping)
• Used ::ng-deep (deprecated but still functional)
• Tried color: red without !important
• Checked the browser developer tools to ensure the style isn't being overridden
• Tested with simple inline styles like h1 { color: red; }
• Cleared browser cache and rebuilt the Angular project
• Add Styles in separated files and import it within styleUrls

Here is angular.json

 {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "cli": {
    "packageManager": "yarn",
    "analytics": "***"
  },
  "newProjectRoot": "projects",
  "projects": {
    "control-panel": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "cm",
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "outputPath": "dist/",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/firebase-messaging-sw.js",
              "src/.htaccess",
              {
                "glob": "**/*",
                "input": "./node_modules/leaflet/dist/images",
                "output": "assets/"
              }
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
              "node_modules/ol/ol.css",
              "./node_modules/leaflet/dist/leaflet.css",
              {
                "input": "src/styles/combined-css/main-style.min.css",
                "bundleName": "mainLtrStyle",
                "inject": false
              },
              {
                "input": "src/styles/combined-css/main-style.rtl.min.css",
                "bundleName": "mainRtlStyle",
                "inject": false
              }
            ],
            "scripts": [
              "./node_modules/@popperjs/core/dist/umd/popper.min.js"
            ],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true
          },
          "configurations": {
            "staging": {
              "baseHref": "/alkaram-control-panel-staging/",
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.staging.ts"
                }
              ],
              "outputHashing": "all",
              "optimization": true,
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "production": {
              "baseHref": "/",
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all",
              "optimization": true,
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "development": {}
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "configurations": {
            "staging": {
              "browserTarget": "control-panel:build:staging"
            },
            "production": {
              "browserTarget": "control-panel:build:production"
            },
            "development": {
              "browserTarget": "control-panel:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-builders/custom-webpack:extract-i18n",
          "options": {
            "browserTarget": "control-panel:build"
          }
        },
        "test": {
          "builder": "@angular-builders/custom-webpack:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/firebase-messaging-sw.js",
              "src/.htaccess",
              {
                "glob": "**/*",
                "input": "./node_modules/leaflet/dist/images",
                "output": "assets/"
              }
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
              "node_modules/ol/ol.css",
              "./node_modules/leaflet/dist/leaflet.css",
              {
                "input": "src/styles/css/main-style.min.css",
                "bundleName": "mainLtrStyle",
                "inject": false
              },
              {
                "input": "src/styles/css/main-style.rtl.min.css",
                "bundleName": "mainRtlStyle",
                "inject": false
              }
            ],
            "scripts": [
              "./node_modules/@popperjs/core/dist/umd/popper.min.js"
            ]
          }
        }
      }
    }
  }
}````

• angular
• angular-material

Share Improve this question Follow edited yesterday user20140095 asked 2 days ago user20140095user20140095 1111 silver badge33 bronze badges New contributor user20140095 is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct. 6

• So you explicitely say that it is certainly something wrong about your project configuration but do not share anything... For my part I'm not expert enough to point in the right direction, but providing a reproduction would greatly increase the help we can provide. – Salketer Commented 2 days ago
• What CSS preprocessor are you using in your project? – Tortila Commented 2 days ago
• 1 I think you improve your answer by adding a stackblitz that reproduces your problem. It would be easier to investigate what the issue is. – aghwotu Commented 2 days ago
• The fact that inlined styles aren't working is bizarre. It's just HTML and CSS, after all. What is the compiled HTML when you try with inlined styles? – Meqwz Commented 2 days ago
• I have added angular.json configuration , All things was working fine , The issue was accrued not long ago – user20140095 Commented yesterday

 |  Show 1 more comment

1 Answer 1

Sorted by: Reset to default 0

Try it with these 2 solutions and check.

Solution-1

@Component({
  selector: 'cm-test',
  templateUrl: './test.component.html',
  styles: [
    ':host h1 { color: red !important; }'
  ],
  encapsulation: ViewEncapsulation.None
})
export class TestComponent {}

Solution-2

styles: [
    '::ng-deep h1 { color: red !important; }'
  ]

本文标签： Angular Component Styles Not AppliedStack Overflow