Issue
I'd like to try to use css variables in my Angular 11 component.
<div class="main-content">
<a>Test Link</a>
</div>
With this app.component.css
div.main-content{
--main-color: red
}
a{
color: var(--main-color);
}
But if I try to use :root
in my css link is black.
:root {
--main-color: red
}
a{
color: var(--main-color);
}
The :root selector matches the document's root element.
Why it doesn't match in my case?
UPDATE If I put :root
to default styles.css
in angular project that is included globally everything works.
What's wrong with my app.component.css
?
Solution
You can't use the :root
selector in an Angular component, it just simply won't work, neither should it. Check out https://github.com/angular/angular/issues/32177.
Answered By - Trismuto
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.