覆盖Angular 4组件的样式-Java 学习之路

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

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

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

.title {
  width: 50%;
}

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

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

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

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

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

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

任何帮助赞赏！

2 回答