从包含组件的角度应用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：

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

Answer 2

您可以添加::ng-deep：

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

PS：尽管将不推荐使用，但目前没有其他选择，例如official doc mentioned：

  

不推荐使用穿刺阴影的后代组合器，并且从主要的浏览器和工具中删除了对它的支持。因此，我们计划放弃对Angular的支持（针对/ deep /，>>>和:: ng-deep的全部3个）。在此之前，应首选:: ng-deep以获得与工具的广泛兼容性。