我可以隔离放大验证器样式吗？答案

【问题标题】：Can I isolate amplify-authenticator styles?我可以隔离放大验证器样式吗？
【发布时间】：2019-02-15 21:07:59
【问题描述】：

为了将适当的样式应用于<amplify-authenticator> 组件，我按照此处的说明进行操作：https://github.com/aws-amplify/amplify-js/issues/1870

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

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

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

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

使用 Angular 7。

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：