Gatsby Link

Add an active style to Gatsby Link or other React router link components. Import the Theme UI custom JSX pragma for styling the router link components directly, without using wrapper 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>

Full code for this example:

/** @jsxImportSource theme-ui */
import { Link } from 'gatsby'

export default (props) => (
  <Link
    {...props}
    activeClassName="active"
    sx={{
      color: 'inherit',
      '&.active': {
        color: 'primary',
      },
    }}
  />
)