javascript - 如何使用样式化组件以相同样式扩展 Link 和 NavLink

Question

Styled Components 的新手，我正在尝试找出一种更好的方式来扩展和共享样式。

我有这样的东西:

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

const StyledNavLink = styled(Link)`
  position: relative;
  display: flex;
  height: 100%;
  text-decoration: none;
`;

const StyledNavLink = styled(NavLink)`
  position: relative;
  display: flex;
  height: 100%;
  text-decoration: none;
`;

有没有办法为两个组件定义相同的属性一次？

编辑:我想我有一个方法来做到这一点(使用 css helper function )

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

Answer 1

一种方法是你的答案:

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);

我会选择第一个，因为它看起来更具表现力，并且符合 styled-components 作者打算使用该库的声明方式。