Javascript 如何使用样式化组件扩展具有相同样式的Link和NavLink

对于样式化组件来说是个新手，我正试图找到一种更好的方式来扩展和共享样式

我有点像：

从“样式化组件”导入样式化
从'react router dom'导入{Link，NavLink}；
const StyledNavLink=styled（Link）`
位置：相对位置；
显示器：flex；
身高：100%；
文字装饰：无；
`;
const StyledNavLink=styled（NavLink）`
位置：相对位置；
显示器：flex；
身高：100%；
文字装饰：无；
`;

有没有办法只为两个组件定义一次相同的正确值

编辑：我想我有一种方法（使用）

---

一种方法是从你的答案开始：

import styled, {css} from 'styled-components'
import { Link, NavLink } from 'react-router-dom';

const sharedStyle = css`
  position: relative;
  display: flex;
  height: 100%;
  text-decoration: none;
`

const StyledNavLink = styled(Link)`
  ${sharedStyle}
`;

const StyledNavLink = styled(NavLink)`
  ${sharedStyle}
`;

另一种可能是创建专用功能：

import styled, {css} from 'styled-components'
import { Link, NavLink } from 'react-router-dom';

const withLinkStyles = (component) => styled(component)`
  position: relative;
  display: flex;
  height: 100%;
  text-decoration: none;
`;

const StyledNavLink = withLinkStyles(Link);
const StyledNavLink = withLinkStyles(NavLink);

---

我会选择第一个，因为它似乎更具表现力，并且与作者打算使用库的声明性方式

样式化组件一致。
这是使用
共享样式的好方法。
：）
import styled, {css} from 'styled-components'
import { Link, NavLink } from 'react-router-dom';

const withLinkStyles = (component) => styled(component)`
  position: relative;
  display: flex;
  height: 100%;
  text-decoration: none;
`;

const StyledNavLink = withLinkStyles(Link);
const StyledNavLink = withLinkStyles(NavLink);