Theme-ui: Styling react-router-dom Link components

[luniki]

It is very easy to style react-router's Link components via sx. But how do I make sure that they look the same as the links (a elements) generated by MDX (they are using the specifications from my theme).

Is this the best way to do it?

/** @jsx jsx */
import { jsx } from 'theme-ui';
import { Link } from 'react-router-dom';

function MyComponent(props) {
  return <Link to="/" sx={theme => theme.styles.a}>somewhere</Link>;
}

[jxnblk]

You can use variants for this, e.g. <Link sx={{ variant: 'styles.a' }} /> - alternatively you can use Styled.a with the as prop: <Styled.a as={ReachLink} />

[luniki]

Thank you.