Why does Astro Prioritize my Parent CSS Styling ? | Astro Lounge | Page 1

wintry condor Mar 5, 2024, 7:35 PM

#

I am applying two classes to my JSX element one from my Parent Astro component the other is within my child component why does Astro give priority to my parent component class.

The className class comes from my Parent Component and the headerlink is a class within my child component. Why does Astro favor the color attribute on the Parent which is white.

My goal here is to set the all the NavLinks to be white but if the link is selected or active then it should be red.

river mountain Mar 5, 2024, 8:34 PM

#

did u change scopedStyleStrategy ?

wintry condor Mar 5, 2024, 9:13 PM

#

nope

#

How does the scopedStyleStrategy work ?

river mountain Mar 5, 2024, 9:15 PM

#

https://docs.astro.build/en/reference/configuration-reference/#scopedstylestrategy

Docs

Configuration Reference

radiant adder Mar 6, 2024, 2:55 AM

#

Have you confirmed that .headerlink is being set properly using your logic?

#

By inspecting in the browser

#

Also, Astro includes class:list which might be a little bit cleaner syntax than using a template literal with the backticks

#Why does Astro Prioritize my Parent CSS Styling ?