Overriding global css in a new component Angular

Question

I need some help on CSS since my CSS is very rusty. So I am working on a project which has a couple of global CSS files and they have properties defined for various tags (ex-> .btn). I am using an external library called Form.io in my project but those global CSS files are messing up the CSS files from the library Form.io since some of the classes are already defined in the global CSS file. Is there a way to override those specific classes so that the Form.io library uses its own CSS-defined properties and not the global CSS properties?

I tried using the :not() in the global CSS file for certain classes that I think are affecting the Form.io library but doing so affects other pages and their style so that is something I don't want. Any help or suggestions would be great.

Mohamed Karkotly · Accepted Answer · 2021-08-19 15:53:16Z

1

Add !important in the end of your CSS rule to ovverride global styles.

Example:

.btn {
  background-color: red !important;
}

Hope this helped.

answered Aug 19, 2021 at 15:53

Mohamed Karkotly

1,5253 gold badges15 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Shalin Patel Over a year ago

Doing that alone doesn't seem to work but I also have to add :host ::ng-deep. Is that a good practice to follow?

Mohamed Karkotly Over a year ago

@Shalin - There's no peoblem with that since you are using :host before ::ng-deep.

Juan Vicente Berzosa Tejero Over a year ago

Angular 10 - Avoid using ::ng-deep (ngdeep) [deprecated]:dev.to/jwp/angular-10-ng-deep-and-host-pseudo-classes-1kbg

Mohamed Karkotly Over a year ago

@JuanBerzosaTejero - Could you please provide an alternative? encapsulation: ViewEncapsulation.None is not practical either, this had a long discussion here (stackoverflow.com/questions/46786986/…) but not one useful answer regarding deprecation of ::ng-deep.

Collectives™ on Stack Overflow

Overriding global css in a new component Angular

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related