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:
.captcha-main-image {
width: <your-value>
}
Typically, the !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:
.captcha-main-image {
max-width: 100px;
}
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:
.captcha-main-image {
width: 100%;
height: auto;
}<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 !important somehow?
Of course you can do it with !important but you can also do it by using Javascript. The only thing is “When do you want to change the width ?”
Look for thee class the original component is using. And then override that class with
ng-deep
max-width
Yes wording wasn’t correct but outcome will have the desired effect, assuming ‘width’ value set at 100%. Will amend thanks.