在Angular2应用程序中,我经常遇到一个问题,即设置页面的背景颜色或图像。在应用程序中,如果我在styles.css中提到一种特定的颜色作为背景,那么这种颜色将应用于我开发的所有页面,因为它将全局应用样式。现在,如果我的登录页面是蓝色的,我想改变我的主页的背景颜色为白色,我该怎么做?因为在组件Homepage中,我们有:html和homepage.component.css。在homepage.component.css中,css只影响主页的元素。我不能改变整个页面的颜色或添加一个图像作为整个页面的背景,因为body { ... }
将无法在那里工作。@import url也不起作用。
如何更改Angular2应用中不同组件的背景颜色?
如有任何帮助,我们将不胜感激。- 谢谢-谢谢
5条答案
按热度按时间2w3rbyxf1#
这里有另一个解决方案。这可能有点基础,限制或黑客,但它工作:
style.css
字符串
home.component.css
型
home.component.html
型
login.component.css
型
login.component.html
型
等等。
ghhaqwfi2#
字符串
要覆盖styles.css中的样式并为组件指定特定的样式,请将ViewEncapsulation as none添加到组件中并导入正确的类,它将工作。
68bkxrlz3#
您可以使用
:host
选择器在宿主组件的模板中应用样式,该模板是当前组件的父模板。在你的组件的css中,试试这个:字符串
jvidinwx4#
这是我的解决方案。
style.css
字符串
login-home.component.ts
关注OnInit和OnDestroy函数
型
bwleehnv5#
我也遇到了这个问题,我找到了解决办法。
转到您的
component.ts
文件,并将这段代码添加到@component
下的styleUrls
下面。字符串
它对我有效,希望它对你也有效。