Is it possible to avoid CSS conflicts when using multiple style sheets?
Consider Style 1:
.heading {
color: green;
}
And Style 2:
.heading {
color: blue;
}
If these two styles are applied in different views and rendered on a layout as a Partial View, there could be conflicts where one overrides the other.
However,
With Angular (refer to page 16), how do these styles coexist in different components without being overridden?
For instance:
import { Component } from '@angular/core';
@Component({
selector: 'app-user-item',
template: '<p class="heading">abc</p>',
styleUrls: ['./user-item.css']
})
export class UserItemComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
In user-item.css:
.heading{ color :green}
In app-user.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-user',
template: '<p class="heading">abc</p>',
styleUrls: ['./user.css']
})
export class UserItemComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
In user.css:
.heading{ color :blue}
When displaying this on a page:
<app-user></app-user>
<app-user-item></app-user-item>
The outcome is similar to this screenshot: