[gatsby-theme-minimal-blog]: Navigation Item active color doesn't work.

[cesards]

Description

Hi there! First of all, thank you so much for your work. Your themes are amazing and as a rookie web developer, having sections properly modularized really helps.

I'm inheriting my site from your theme gatsby-theme-minimal-blog. I shadowed your navigation components so I could make a few changes on the Active links in the menu (I wanted to distinguish the active link from the rest), but after trying a few things they just don't work.

Link to the component

I saw you added:

 ".active": { color: `heading` },

but I think the color is overridden by the theme-ui color, so it doesn't seem to take effect.

I'm pretty new to GatsbyJS, React, Theme-UI and most of the other frameworks used, so I'm not sure this is right, but I've tried to override the nav item's styles in different ways and there was no way I could get that done.

Steps

If we remove

".active": { color: `heading` },

and

activeClassName="active"

from the Navigation component, we don't get behavioral changes in the site, which I think might prove that active color not being applied.

[LekoArts]

Thanks for the issue! This is an upstream issue and I filed a ticket: system-ui/theme-ui#990

[cesards]

Just went over it. Amazing repro description and kudos again. Feel free to keep this open for visibility or close it to your convenience.

[LekoArts]

I've included a fix to this in the new major version