Angular 6, how to configure CSS settings to create a persisting background color on all components?
Question
I'm trying to create a background color that will persist on all of the components in my Angular app .
When I target html background: blue in the styles.css (global style sheet) this works if I change the encapsulation on the app.component.ts to ViewEncapsulation.Native , however it covers every component in the app. Meaning the color is on top of every other component.
I just want to set a background color that that will be behind all components in the app and persist .
2 answers
solution1
1 ACCPTED 2018-10-04 12:19:19
I had the same problem and fixed with this. I do not know if is the best approach, try to put into the body tag in index.html :
<body class=".." style="background:#E8EBEE;">
solution2
0 2018-10-04 13:24:07
Go to your Style.css or Style.scss file and add this code:
body { background: #EEE //Your Background Color that will be shown between all components even if the component fails to load. }Import Renderer2 as follow:
import { Component, OnInit, Renderer2 } from '@angular/core';And If you want to add a custom background when a component being use, you will have to go to your component.ts File and add this code to the constructor:
constructor(private renderer: Renderer2) { this.renderer.setStyle(document.body, 'background', '#FFF'); }
That code will apply a background color to the body only when this component is loaded.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.