禁用ViewEncapsulation.None在Angular中的效果

问题描述

如何禁用ViewEncapsulation.None的效果?例如.我的一个组件(firstComponent)定义了具有某些属性的CSS类.有secondComponent使用相同的CSS类.我希望我的"secondComponent"对第一个组件样式表定义的属性使用不同的特定值.我该如何实现?

How to disable the effect of ViewEncapsulation.None? E.g. 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?

注意:我在"secondComponent"中用不同的值重新定义了相同的类，将secondComponent的viewEncapsulation保留为默认值.它对我不起作用.

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;
}

我正在两个组件中创建p-tree，内部使用.ui-tree-container.我希望我的secondComponent的树的背景应该是白色，而在其他所有地方，树的背景应该保持黑色.

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.

推荐答案

您可以将CSS封装在组件选择器中.

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;
}

通过这种方式，它们不会互相影响模板.另外，您可以选择对两个或两个都不使用ViewEncapsulation.None.

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.

这篇关于禁用ViewEncapsulation.None在Angular中的效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！