CODEWITHSUNDEEP
angularangular5
egurb
egurb

Reputation: 1216

How to apply CSS on custom tag in Angular 2/5?

I've installed the Google ReCaptcha (ng-recaptcha) component to my app, and was wondering if there is a way to apply some styles to children elements of the generated, in my case, <re-captcha></re-captcha> element.

For example:

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

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

Could you please share some experience of achieving the desired result?

UPDATE:

The following works however, if set directly in DevTools...

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

Upvotes: 4

Views: 3051

Answers (3)

bc1105
bc1105

Reputation: 1270

This is caused by the view encapsulation setting of the component.

You can use a /deep/ or ::ng-deep selector to target child components in Native or Emulated (which is default) modes, in which abbasak's answer will work.

Upvotes: 7

Zlatko
Zlatko

Reputation: 19578

Two options: either set these styles you need as global styles in your app(you likely have something like styles.scss in your .angular-client.json), or you can try setting ViewEncapsulation.None in the metadata of the component that wraps your` element.

Upvotes: 3

abbas-ak
abbas-ak

Reputation: 642

Try following code snippet:

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

Upvotes: 2

Related Questions