覆盖Angular 4组件的样式

Question

我正在编写一个包含可重用组件的Angular库。我想提供一些开箱即用的默认样式，但我希望在应用程序中使用这些库组件时，可以轻松覆盖这些默认样式或进行细粒度自定义。

这样做的最佳做法是什么？例如，如果我为这样的'test'组件定义了一个组件模板，我决定大多数时候将宽度设置为50％（简单示例）：

<div class="title">
   Test
</div>

.title {
  width: 50%;
}

在一个特定的消费者应用程序中，我希望此标题显示我正在使用的特定容器的100％：

<div class="container">
  <test></test>
</div>

在我的这个应用程序组件的SCSS中，我会尝试做类似的事情：

test {
  .title {
    width: 100%;
  }
}

然而，目前我遇到了CSS范围和继承优先级的问题，而对于具有许多嵌套元素的更复杂的组件，以这种方式表达可能会变得棘手且难以维护。

这样做是否有意义，或者我是否通过使用CSS了解内部过多来打破组件封装？如果是这样，在尝试将它们放入更大的应用程序时，如何处理这样的子组件的布局和样式？是应该通过数据绑定特定属性还是选项对象来完成？

任何帮助表示赞赏！

Answer 1

为您想要自定义的部件创建参数化指令。然后，每个实现都可以将自己的一组值传递给指令。它会像

<test [userprop]="value"></test>

Answer 2

您可以使用::ng-deep伪类选择器覆盖样式，如下所示，

:host ::ng-deep test {
  .title {
    width: 100%;
  }
}