如何在Angular 2/5中的自定义标签上应用CSS？

Question

我已将Google ReCaptcha (ng-recaptcha)组件安装到我的应用中，并且想知道是否有办法将一些样式应用于生成的子元素，在我的情况下，{{ 1}}元素。

例如：

<re-captcha></re-captcha>

请您分享一些实现预期结果的经验吗？

更新

但是，如果直接在DevTools中设置......

re-captcha{
    border: 1px solid #ccc; /*works*/
}

re-captcha div{
    border: 1px solid #ccc; /*doesn't work*/
} 

Answer 1

这是由组件的视图封装设置引起的。

您可以使用/deep/或::ng-deep选择器来定位Native或Emulated（默认）模式中的子组件，其中abbasak的答案将起作用。

Answer 2

两个选项：在应用中将所需的样式设置为全局样式（styles.scss中可能有.angular-client.json），或者您可以尝试设置ViewEncapsulation.None in the metadata of the component that wraps your`元素

Answer 3

请尝试以下代码段：

re-captcha /deep/ div{
    border: 1px solid #ccc;
}