我可以隔离放大身份验证器样式吗？

Question

为了将适当的样式应用于localhost/minprice=1000&maxprice=2000 组件，我按照此处的说明进行操作：https://github.com/aws-amplify/amplify-js/issues/1870

这意味着安装@ aws-amplify / ui并导入样式表。

但是，这些样式表包含未指定的选择器，这些选择器更改了span和h3等元素。我不希望验证者的样式决定我整个应用程序的样式（反之亦然）。

是否有办法将这些样式限制为仅适用于某个组件树？

ViewEncapsulation似乎是答案，但似乎没有提供正确的限制，因为我使用的是不受控制的导入组件。

使用Angular 7。

Answer 1

这不是很漂亮，但是我设法通过将其添加到组件样式表中来做到这一点：

::ng-deep {
  @import '~@aws-amplify/ui/src/Theme';
  @import '~@aws-amplify/ui/src/Angular';
  @import '~@aws-amplify/ui/dist/style';
}

注意，这仅在当前使用Angular和Sass / SCSS时有效。据我了解，对深度选择器的支持很快就会消失