在Angular中禁用ViewEncapsulation.None的效果

Question

How to disable the effect of ViewEncapsulation.None? Eg One of my component (firstComponent) defines a css class with some properties. There is secondComponent which uses the same css class. I want my "secondComponent" to use the different specific values for properties defined by first component stylesheet. How can I achieve this?

Note : I redefined the same class in "secondComponent" with different values, keeping the viewEncapsulation of secondComponent default. It didn't work for me.

FirstComponent:
@Component({
    moduleId: module.id,
    selector: "FirstComponent",
    templateUrl: 'FirstComponent.component.html',
    styleUrls: ['FirstComponent.component.css'],
    encapsulation: ViewEncapsulation.None
})
FirstComponent.component.css

.ui-tree .ui-tree-container {
    background-color: #252525;
    color: white;
}

Second Component:
@Component({
    moduleId: module.id,
    selector: "SecondComponent",
    templateUrl: 'SecondComponent.component.html',
    styleUrls: ['SecondComponent.component.css'],
})
SecondComponent.Component.css

.ui-tree .ui-tree-container {
    background-color: white;
    color: black;
}

I am creating p-tree in both the component, which internally uses .ui-tree-container. I want my secondComponent's tree's background should be white, while for all other places tree's background should remain black.

Answer 1

You can encapsulate your css within your component selectors.

FirstComponent.component.css

FirstComponent .ui-tree .ui-tree-container {
    background-color: #252525;
    color: white;
}

SecondComponent.component.css

SecondComponent .ui-tree .ui-tree-container {
    background-color: white;
    color: black;
}

With this way, they will not affect each other templates. Also, you can choose to use ViewEncapsulation.None for both/either of them or not.

Answer 2

You can use Default ViewEncapsulation for the FirstComponent as well, and instead use ::ng-deep selector in your css files respectively.

SecondComponent

::ng-deep .ui-tree .ui-tree-container{
  background-color: white;
  color: black;
}

FirstComponent

::ng-deep .ui-tree .ui-tree-container{
  background-color: #252525;
  color: white;
}

Answer 3

If you want to reuse CSS white only customising somes parts, you could make use of scss variables

Step #1

Create a scss file with common properties and default colors

commontree.scss

$bgColor : white !default;
$color: black !default;

.ui-tree .ui-tree-container {
    background-color: $bgColor;
    color: $color;
}

Step #2

In your component's scss file, modify the variables' values if needed and import the comon scss file

component1.scsss

$bgColor:  #252525; /* Override colors */
$color: white;
@import './commontree.scss';

component2.scss

/* Use default colors */
@import './commontree.scss';

For this, you can (and probably should) keep view encapsulation to the default ViewEncapsulation.Emulated

Stackblitz demo