How to make a style or stylesheet available to children components

Question

How can I make this style available to child components?

.invalid {
  border-color: #dd2c00;
}

Is it possible to make an entire component's style sheet available to child components?

https://stackoverflow.com/questions/36527605/style-child-components-from-parent-components-css-file — Hagai Wild, Dec 23 '18 at 11:34
Possible duplicate of [Style child components from parent component's CSS file](https://stackoverflow.com/questions/36527605/style-child-components-from-parent-components-css-file) — JoSSte, Dec 23 '18 at 11:36

score 1 · Answer 1 · answered Dec 23 '18 at 11:41

Regarding your class, add ::ng-deep in front of it and you'll be fine.

::ng-deep .invalid {
  border-color: #dd2c00;
}

As for your other question:

Is it possible to make an entire component's style sheet available to child components?

You can change the component's ViewEncapsulation property to Native or None

@Component({
  ...
  encapsulation: ViewEncapsulation.None
  ...
})

1 Answers1