Apply styles from parent

Question

Suppose I have a component with this template:

<div class="frame">
  <span class="user-defined-text">{{text}}</span>
</div>
<style>
  span { font-size: 3em; }
  .frame { ... }
</style>

How can I merge the styles applied to the component, e.g.

<custom-component [text]="'Some text'">
<style>custom-component { font-weight: bold; }</style>

so that the final output "Some text" is both bold and 3em sized?

Even better is there a way to get the computed styles for the host element, so that, for example, I could apply the background-color of the host to the border-color of some element in my template?

Answer 1

• set encapsulation: ViewEncapsulation.None to allow styles from outside to be applied.

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

@Component({
  selector: 'custom-component',
  encapsulation: ViewEncapsulation.None
})
export class Custom {

• use styleUrl to add a CSS file in combination with host selector

:host(.someClass) {
      background-color: blue;
}

<custom-component class="someClass"></custom-component>

to apply styles depending on the class added to the element.

Answer 2

I know this is old, but I feel this should be more visible. You could use the /deep/ selector to force a style down through the child component tree into all the child component views. The /deep/ selector works to any depth of nested components, and it applies both to the view children and the content children of the component.

I feel this is much cleaner and easier to implement.

parent.css

/deep/ .class {
    background-color: red;
}

https://angular.io/docs/ts/latest/guide/component-styles.html