Because of Angular’s view isolation, you can override it only if you put the overrides in application’s main style sheet.
In your application’s styles.css, which is your application’s main scss file – the one that is mentioned in agular.json, add the override:
!important is not required. Use it only if required.
If you want to override class within component adding
!important will help
Or if you want to override the css outside of that component use
::ng-deep .captcha-main-image can do.
You could add the class with max-width attribute to limit the width, e.g:
I have a component which I’m inherits (including its css style) and I would like to change one of its attributes
This is the current CSS:
<img class ="captcha-main-image" id="captchaImage" src="">
I would like to change its width value.
This element is being generated by a different source and I can’t ask the developer to change its value.
Any chance I can do that by using
Look for thee class the original component is using. And then override that class with
Yes wording wasn’t correct but outcome will have the desired effect, assuming ‘width’ value set at 100%. Will amend thanks.