Question

我有一些由其他人编码的组件。现在我想在我的应用程序中使用这些组件。这时，我想修改他们的风格。一般来说，如何将父组件（我的）中的样式应用于子组件（不是我的组件）？

公共组件的模板：

<span class="input-text" >
  <span *ngIf="isRequired" class="required-mark">※</span>
<input #nativeElement
       class="{{class}}"
       ...
>
</span>

我的组件的模板（主持人）：

<common-input-text class="my-input-class" ...></common-input-text>

我的组件的css ：

.my-input-class {
  background-color:blue;
  width: 400px;
}

my-input-class不会用于common-input-text组件。

如果我在my-input-class文件中定义了styles.css，那就可以了。但我认为这不是一个好方法。因为它会影响所有页面。

一个解决方案：
在我的组件css文件中使用以下css定义可以实现它。

:host /deep/ input {
  background-color: red;
  width: 300px;
}

但是，这是个好主意吗？每次我想稍微调整子组件时，我都必须这样做。我认为Angular必须有更好的方法来实现这一目标。

将父组件中的样式应用于子组件

0 个答案: