Question

在Angular 2中，我仍然没有得到一些东西。通常将组件描述为：

应用程序的可重用构建块

它由HTML / CSS / Javascript组成。让我感到困惑的是造型。

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

从这个意义上说，取决于我们放置组件的位置，父母的风格可能会导致不同的效果，这可能使它不能真正重复使用，因为当我们在某种情况下构建它时它可能看起来很棒，但可能会完全破坏其他地方。

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

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

从这个意义上说，样式有两个问题（实际上可能还有更多） - 来自父母的影响以及使用Bootstrap等全局样式的可能性。

我们该如何处理？我们如何解决这个问题才能做出好的组件设计？

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

Answer 1

为了解决您的第一点，组件的样式不会像普通的css一样由子代继承。 Shadow Dom使您必须明确允许继承，例如穿孔运算符.parent >>> .child: {...}或/ deep / .parent /deep/ .child: {...}。因此，默认情况下，每个组件的样式都是完全隔离的。

对于来自第三方库的全局样式和小部件，如果你有更多可以轻松管理（即超过1个），你可以使用自己的语义类包装样式。

例如

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

组件样式不应该取决于应用程序的其余部分吗？

1 个答案: