Styled.a vs Link for active class

[rjmoggach]

I'm trying to style active menu items and running into an issue with Styled.a vs Link in gatsby.

const MenuItem = props => {
    return <Styled.a as={Link} sx={{ variant: 'text.menu' }} {...props} activeClassName='active' />
}

returns a link tag with aria-current="page" and no active class. I've tried styling using

'[aria-current]:not([aria-current="false"])': {
            color: '#fff',
        },

but that's not working...

The following works but doesn't allow for using the Styled.a pattern which is sooo nice.

const MenuItemOld = props => {
    return <Link sx={{ variant: 'text.menu' }} {...props} activeClassName='active' />
}

[jxnblk]

Hmm. <Styled.a as={Link} activeClassName='active' /> should work so this might be a bug. Does the active class name not render at all?

[rjmoggach]

Correct. no active class is rendered.