html - 组件样式不应该依赖于应用程序的其余部分？

Question

在 Angular 2 中，有些东西我还不太明白。通常一个组件被描述为:

A reusable building block for an application

它由 HTML/CSS/Javascript 组成。令我困惑的是样式。

现在真正让我担心的是样式。这让我担心的原因是因为对于 DOM，一个元素的样式通常会受到父元素可用样式的影响。

从这个意义上说，根据我们放置组件的位置，父级样式可能会对它造成不同的影响，这可能使其无法真正重用，因为当我们在特定情况下构建它时它可能看起来很棒，但可能会在其他地方完全崩溃。

此外，在某种意义上可能还有其他“全局”可用的类，我似乎已经在某些组件中使用了。这里的主要示例是 Bootstrap。

我似乎有人在使用 Bootstrap 的类，例如 row、form-control 等等。这些类在组件的“外部”，它们可供应用程序使用，并且组件“相信”这些类将可用。从这个意义上说，该组件依赖于自身外部的某些东西，我不知道它如何干扰这个“可重用的构建 block ”。

从这个意义上说，样式有这两个问题(实际上可能还有更多)- parent 的影响和使用像 Bootstrap 这样的全局样式的可能性。

我们该如何应对？我们如何解决这个问题以进行良好的组件设计？

一个组件真的不应该依赖于像 Bootstrap 这样的外部东西吗？如果是这样，处理这些样式问题的正确方法是什么？

Answer 1

为了解决您的第一点，组件的样式不会像普通 css 那样由其子项继承。 Shadow Dom 使您必须明确允许继承，例如 pierce operator .parent >>> .child: {...} 或/deep/.parent/deep/.child: {...}。所以每个组件的样式默认是完全隔离的。

至于来自第 3 方库的全局样式和小部件，如果您有超过可以轻松管理的数量(即超过 1 个)，您可以使用自己的语义类包装样式。

例如。

.my-button-appearance {
  @extend .waves-effect;
  @extend .btn-flat;
  color: color('orange', 'lighten-2');
}