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:
Edit the page on GitHub/** @jsxImportSource theme-ui */import { Link } from 'gatsby'export default (props) => (<Link{...props}activeClassName="active"sx={{color: 'inherit','&.active': {color: 'primary',},}}/>)