Overriding Body Background Color in Angular 7

How to change whole page background-color in Angular

You can do this from any of your component. For example:

export class AppComponent implements AfterViewInit {
    constructor(private elementRef: ElementRef) {}
    ngAfterViewInit() {
        this.elementRef.nativeElement.ownerDocument
            .body.style.backgroundColor = 'yourColor';
    }
}

By using this.elementRef.nativeElement.ownerDocument, you can access the window.document object without violating any angular convention. Of course, you can directly access the document object using window.document but, I think it would be better to access it through ElementRef .

How to overwrite body property in component?

To do that you need to set ViewEncapsulation.None:

import {..., ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'my-app',
  encapsulation: ViewEncapsulation.None,

All styles inside this component will be added to the global styles.

Here is the quote from the docs:

None means that Angular does no view encapsulation. Angular adds the
CSS to the global styles. The scoping rules, isolations, and
protections discussed earlier don't apply. This is essentially the
same as pasting the component's styles into the HTML.

Angular background-color in global styles.css not working

The use of !important is a poor solution.
You have most likely a css sheet overiding background-color property (check bootstrap if you are using it).
The best solution to fix it is opening console in your browser and check manually.

To do it :

• press f12
• click on top element
• filter by background property
• you will now be able to see which stylsheet is defining background color

You should see something like that.

How do I change the Background Color of the middle of mat-expansion-panel (when expanded)?

I ended up solving this using global styles, but using a component-specific class as a parent (to prevent overriding all occurrences of .mat-expansion-panel-body)

I chose this method because I didn't want to use deprecated ng-deep or mess with my component's encapsulation.

expansion-overview-example.component.html

<div class="expansion-overview-example">
  <p>This is the primary content of the panel.</p>
</div>

styles.css

.expansion-overview-example .mat-expansion-panel-body {
    background-color: red;
}

Override background color in active tabs Angular Material

Try this CSS, it works on inspect element:

md-tabs .md-tab.md-active {
    background-color: #000;
    color: #fff;
}

EDIT:
For Angular 2+ Material:

.mat-tab-label-active {
    background-color: #000;
    color: #fff;
    opacity: 1;
}

---

Related Topics