css - 从包含组件 Angular 应用 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:虽然它会被弃用，但目前没有其他选择，因为official doc mentioned :

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.