Gatsby Link

Add an active style to Gatsby Link or other React router link components.

<Link
  to='/recipes/gatsby-link/'
  activeClassName='active'
  sx={{
    color: 'inherit',
    '&.active': {
      color: 'primary',
    }
  }}>
  Link
</Link>
<Link
  to='/recipes/gatsby-link/'
  activeClassName='active'
  sx={{
    color: 'inherit',
    '&.active': {
      color: 'primary',
    }
  }}>
  Link
</Link>

/** @jsx jsx */
import { jsx } from 'theme-ui'
import { Link } from 'gatsby'
export default props =>
  <Link
    {...props}
    activeClassName='active'
    sx={{
      color: 'inherit',
      '&.active': {
        color: 'primary',
      }
    }}
  />