我们有一个内部Angular组件库(一个项目),每个组件都有基本样式。
我们在应用程序(另一个项目)中使用此库。
应用程序中的组件包含我们库中的组件。
从App的global styles.scss中,我可以将库组件中的元素作为目标。
如果我将全局CSS移到App组件CSS文件中,请尝试尝试执行什么操作,但我无法定位库组件中的任何元素。
app-component.html
<div class="outter">
<library-component specificityattr></library-component>
</div>
library-component.html
<div class="generic-styles">
<p class="hello">Hello</p>
</div>
app-component.scss
library-component[specificityattr] p.hello {
background: red;
}
styles.scss
library-component[specificityattr] p.hello {
background: green;
}
在styles.scss中没有选择器时,我希望P标签具有红色背景。 只有在将相同的选择器放入styles.scss中时,背景才会变为绿色。
这怎么会失败?
设置组件子组件样式的正确方法是什么?
答案 0 :(得分:0)
您的:host
组件是library-component
,并且您想将CSS应用于某些“深度” DOMS,因此它意味着:ng-deep
使用
:host library-component[specificityattr] ::ng-deep p.hello {
background: green;
}
答案 1 :(得分:0)
您正在体验的是Angular中组件默认ViewEncapsulation
的影响。
当您定义一个如下所示的组件时,该组件的视图封装将是默认值,我已将其包含在注释中。这意味着Angular不会为您的组件创建一个所谓的“阴影DOM”,并且所有样式都只会应用于您的组件。
封装的组件
@Component({
selector: 'my-component',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
//encapsulation: ViewEncapsulation.Emulated
})
如果您想不仅将样式应用于您的组件,则可以在组件声明中指定特定的ViewEncapsulation
。使用ViewEncapsulation.None
会将样式移到DOM头,并且仍然不会创建阴影DOM。
无封装
@Component({
selector: 'my-component',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None
})
请记住,ViewEncapsulation.None
会将您的样式“泄漏” 到其他组件,这很重要,这将使您难以对应用程序进行样式设置,除非您确切知道样式的位置被定义。