угловое нанесение css из содержащего компонента

Question

У меня есть базовый компонент, который многократно используется во многих местах. каждое место должно придать свой стиль этому компоненту.
Компонент приложения:

HTML

<p>
  The <b>widgets-input</b> component bellow with some css from AppComponent <br />
  <widgets-input></widgets-input>
</p>

CSS

p {
  font-family: Lato;
}
input {
  width: 100%;
  max-width: 540px;
  height: 52px;
}

Стили не будут применяться к widgets-input

https://stackblitz.com/edit/angular-n3xgmx?file=src%2Fapp%2Fapp.component.css

Answer 1

Вы можете добавить ::ng-deep:

::ng-deep input {
  width: 100%;
  max-width: 540px;
  height: 42px;
  border: solid 1px red;
}

PS: Хотя это устарело, альтернативы пока нет, так как официальный документ упоминал :

Пронзающий теневой комбинатор не рекомендуется, и поддержка удаляется из основных браузеров и инструментов. Таким образом, мы планируем отказаться от поддержки в Angular (для всех 3 of / deep /, >>> и :: ng-deep). До тех пор :: ng-deep следует предпочитать для более широкой совместимости с инструментами.

Answer 2

Если вы хотите стилизовать childs, вы должны использовать ng-deep:

:host::ng-deep widgets-input input{
  width: 100%;
  max-width: 540px;
  height: 42px;
  border: solid 1px red; 
}