Having an angular library with a defined set of css variables for colors applied to components, which are globally set like this:
:root {
-color-1: #000000;
-color-2: #ffffff;
...
}
In my application utilizing this library, I need to override some of these css variables in a similar global manner. For instance, in styles.scss:
:root {
-color-1: #111111;
-color-2: #cccccc;
}
Unfortunately, the css variables from the library take precedence over those from my app, as my app's styles are imported externally through <link rel="stylesheet" href="styles.css">, while the library styles are internally included using <style> tags in the <head> section.
Adding !important to the css variables in my app resolves the issue, but I am seeking a better alternative as using !important is not ideal.