Skip to content
Theme UI
GitHub

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.

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',
},
}}
/>
)
Edit the page on GitHub
Previous:
Recipes
Next:
Flexbox Layout