在组件中应用CSS类，将影响整个CSS角度6

Question

I have one component

my.component.ts That has its own css like this

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css']
})
export class NotificationComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

my.component.css

.hello{
color:red;
}

The problem is that i want to use that class to be visible in entire project in html, i know i can put them globally, but i want to use it from component.

Now other components does not see that class :(

Is there some kind of solution in Angular?

Answer 1

Please take a look at the documentation on View Encapsulation , especially at the "None" part:

None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.

Apply it to the component decorators config object:

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   encapsulation: ViewEncapsulation.None // <-- This
})

Answer 2

Add your css to app.component.css or style.css . It will effect on whole application.

Answer 3

If you want your component css style to be accessible from other component the solution is view encapsulation .

Example :

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class NotificationComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

Angular comes with view encapsulation built in, which enables us to use Shadow DOM or even emulate it, so what ViewEncapsulation.None will do is remove the shadow DOM, so there will be no style encapsulation