在我的app-root组件中,我是app-container组件。我如何设置app-container组件的样式?
HTML:
<app-container></app-container>
CSS:
app-container {
background: red;
}
^上面的CSS不起作用。
我想设置app-container组件的样式和位置。我试过谷歌搜索,但无法找到合适的解决方案。请帮助。
提前致谢!
答案 0 :(得分:9)
是的。如果您启用了shadow-dom或shadow-dom的模拟,则可以通过:host属性设置标记样式。 (默认情况下启用仿真)
E.G。
:host{
background-color:red;
}
我强烈建议你这篇文章: https://angular.io/guide/component-styles
如果它位于不在组件css文件中的全局css文件中,那么上面的css代码应该可以工作。
别忘了检查styleUrl路径。 这是styleUrls的一个例子。
@Component({
selector: 'hero-details',
template: `
<h2>{{hero.name}}</h2>
<hero-team [hero]=hero></hero-team>
<ng-content></ng-content>
`,
styleUrls: ['app/hero-details.component.css']
})
export class HeroDetailsComponent {
/* . . . */
}
有关模拟/本机-shadow dom的更多详细信息: https://angular.io/guide/component-styles#view-encapsulation