Styling react router link with Themed. Can i use different variants?

[jikol1906]

Hello,

My theme looks as follows

  import type { Theme } from 'theme-ui'
  import { btnStyles } from './buttonStyles'

  export const theme: Theme = {
    fonts: {
      main:"'Sriracha', cursive, sans-serif",
    },
    colors: {
      text: "#715450",
      background: "#F3EED9",
    },
    breakpoints:["31.25em", "46.5em", "65.625em", "90em"],
    buttons:btnStyles,
    space:["0","1.2rem","2.5rem","5rem"],
    links:btnStyles,  
    text: {
      heading: {
        fontFamily:'main'
      }
    },
    styles: {
      root:{
        lineHeight:'1.6'
      },
      a: btnStyles
    }
  }

I have set my theme.styles.a to btnStyles

My btnStyles looks as follows

import { ThemeUIStyleObject } from 'theme-ui';

export const buttonStyles: ThemeUIStyleObject = {
  padding: "0.6em 1.7em",
  textAlign:'center',
  letterSpacing:"2px",
  cursor: "pointer",
  textTransform: "uppercase",
  textDecoration:'none',
  fontFamily: "main",
  borderRadius: "999px",
  borderWidth: [2.67,null,4],
  borderStyle: "solid",
  borderColor: "text",
  fontSize:["1.37rem","1.5rem","2.4rem"],
  color: "text",
  bg: 'transparent'
};


export const btnStyles = {
  primary: {
    ...buttonStyles
  },
  secondary: {
    ...buttonStyles,
    bg: 'text',
    color: "white",
  }
}

Now I would like to be able to apply the primary and secondary link styles to a react router NavLink like what I have here

/** @jsxImportSource theme-ui */

import { NavLink } from "react-router-dom";
import { Box, Flex, Grid, Link, Themed } from "theme-ui";

import MainHeading from "./Typography/MainHeading";




function Home() {
  return (
      <>
          <Themed.a.primary as={NavLink} to={"/path-one"}>link one</Themed.a.primary>
          <Themed.a.secondary as={NavLink} to={"/path-two"}>link two</Themed.a.secondary>
      </>
  );
}

export default Home;

However this doesn't work. I can't use <Themed.a.primary> or <Themed.a.secondary>

What is the correct way to style a NavLink with primary and secondary variants?

[lachlanjc]

Hey, great question! I was going to say we don't support multiple link variants right now, but I pulled up the code & I think we actually do, which is news to me! They go under the links key of your theme, not under styles.a.

• We don't recommend using Themed to style your app unless necessary. Using either the components or JSX pragma are both nicer APIs & support more features like variants. Themed gives you the styles styling on app UI, but that set is designed for text content, such as MDX documentation or blog posts or content from a CMS.
• We have both Link & NavLink components out of the box, but you can pass variant="secondary" or wrap that in your own SecondaryLink etc components to access other link variants. That would read from links.secondary in your theme.
• As far as usage, using our Link component:

<ThemeUILink as={RRNavLink} variant="secondary" to="/path-two">link two</ThemeUILink>