CODEWITHSUNDEEP
cssangularencapsulation
Benedikt Beun
Benedikt Beun

Reputation: 148

Overriding the encapsulated :host-style of external component

Is it possible to override :host-styling of an external angular2-component?

We're making a library including a sidebar-component. This component has a default (fallback) background, but this should be overridable by css/theme used in the app. 

@Component({
    selector: 'sidebar',
    styles: [`
        :host { background-color: green; }         
    `],
    template: `
        <h1>sidebar</h1>
        <ng-content></ng-content>
    `
})
export class SideBarComponent { .... }

Main App css: 

<style>
    sidebar {background: red; color: yellow; }
</style>

This returns a sidebar with green background and yellow text, but I want a red background...

Upvotes: 4

Views: 10254

Answers (3)

Benedikt Beun
Benedikt Beun

Reputation: 148

Edited:

As found on http://blog.angular-university.io/how-to-create-an-angular-2-library-and-how-to-consume-it-jspm-vs-webpack/: add an attribute to the body-tag: 

<body override>
    <app></app>
</body>

And in your css: use a selector for this attribute: 

[override] hello-world h1 {
    color:red;
}

This way, your css does not have to be parsed.

Previous solution:

I've found a solution myself: instead of linking my (theming) css-file in index.html, which isn't parsed, I imported this particular css-file in the app.component.ts annotation.

index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
      <link rel="stylesheet/css" type="text/css" href="/assets/style/app.css" />
    </head>
    <body>
        <app></app>
    </body>
</html>

app.component.ts:

import { ... }
@Component({
    selector: 'app',
    styles: [`
        @import "assets/style/theme.css";
    `], 
    template: `
        ...`,
})
export class AppComponent {...}

theme.css:

sidebar {background: red; }

Upvotes: 4

Scott Carmichael
Scott Carmichael

Reputation: 76

Its not possible to overwrite styles set in a component's styles this way. See point 3 on the "Using Component Styles" section in the Component Styles docs (https://angular.io/docs/ts/latest/guide/component-styles.html)

  1. Our component's styles cannot be changed by changes to styles elsewhere in the application.

Using :host-context is probably a nicer way to acheive this (although i have never tried myself).

Upvotes: 0

ranakrunal9
ranakrunal9

Reputation: 13558

You should try to check the same with host-context. As per documentation host-context works just like the function form of :host(). It looks for a CSS class in any ancestor of the component host element, all the way up to the document root. It's useful when combined with another selector.

In the following example, we apply a background-color style to all <h2> elements inside the component, only if some ancestor element has the CSS class theme-light.

:host-context(.theme-light) h2 {
  background-color: #eef;
}

Upvotes: -2

Related Questions