0

我的主题如下

  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
    }
  }

我已经设置theme.styles.a为btnStyles

我的btnStyles样子如下

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",
  }
}

现在我希望能够将primary和secondary链接样式应用于反应路由器NavLink，就像我在这里所拥有的一样

/** @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;

但是，这不起作用。我不能使用<Themed.a.primary>或<Themed.a.secondary>

使用主要和次要变体设置 NavLink 样式的正确方法是什么？

4

0 回答 0