search

LekoArts / gatsby-themes

Get high-quality and customizable Gatsby themes to quickly bootstrap your website! Choose from many professionally created and impressive designs with a wide variety of features and customization options.
https://themes.lekoarts.de
MIT License
1.87k stars 545 forks source link

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

Closed cesards closed 3 years ago

cesards commented 4 years ago

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 commented 4 years ago

Thanks for the issue! This is an upstream issue and I filed a ticket: https://github.com/system-ui/theme-ui/issues/990

cesards commented 4 years ago

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 commented 3 years ago

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