Link and NavLink react-router-dom components :hover not working

Author: austincondiffCreated Jun 21, 2017Updated Jan 21, 2021

Labelsbugverified

The hover does not work on react router components.

<li key="contactInfoPage" style={{display: 'inline-block'}}>
    <NavLink to="/contact-info" style={{
        display: 'inline-block',
        padding: '20px 16px 0 16px',
        textDecoration: 'none',
        color: '#36495a',
        textTransform: 'uppercase',
        fontSize: 12,
        fontWeight: 'bold',
        transition: '.2s',
        //the :hover below does not work
        ':hover': {
            color: '#0078d2'
        }
    }}>Contact Info</NavLink>
</li>

Sure I could simply style a span inside but where's the fun in that?

Source: FormidableLabs/radium

View original on GitHub View discussion on GitHub