Skip to content
Theme UI
GitHub
Recipes / Gatsby Link

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

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