css - 我可以隔离放大验证器样式吗？

Question

为了将适当的样式应用于 <amplify-authenticator>组件，我按照此处的说明进行操作: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 的情况。据我了解，无论如何，对深度选择器的支持很快就会消失