2

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.

Shalin Patel
  • 169
  • 2
  • 12

1 Answers1

1

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

Example:

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

Hope this helped.

Mohamed Karkotly
  • 1,364
  • 3
  • 13
  • 26
  • Doing that alone doesn't seem to work but I also have to add :host ::ng-deep. Is that a good practice to follow? – Shalin Patel Aug 19 '21 at 16:18
  • @Shalin - There's no peoblem with that since you are using `:host` before `::ng-deep`. – Mohamed Karkotly Aug 19 '21 at 16:27
  • Angular 10 - Avoid using ::ng-deep (ngdeep) [deprecated]:https://dev.to/jwp/angular-10-ng-deep-and-host-pseudo-classes-1kbg – Juan Vicente Berzosa Tejero Aug 19 '21 at 21:23
  • @JuanBerzosaTejero - Could you please provide an alternative? `encapsulation: ViewEncapsulation.None` is not practical either, this had a long discussion here (https://stackoverflow.com/questions/46786986/how-and-where-to-use-ng-deep) but not one useful answer regarding deprecation of `::ng-deep`. – Mohamed Karkotly Aug 19 '21 at 21:29