Link.tsx

import React from 'react'
import { css, cx } from 'react-emotion'
import { NavLinkProps } from 'react-router-dom'

import NavLink from '../NavLink/NavLink'

const linkClassName = css`
  color: blue;
`

const Link: React.SFC<NavLinkProps> = props => {
  return <NavLink {...props} className={cx(props.className, linkClassName)} />
}

export default Link

NavLink.tsx

import { NavLink as ReactRouterNavLink } from 'react-router-dom'

import Text from '../Text/Text'

const NavLink = Text.withComponent(ReactRouterNavLink)

NavLink.displayName = 'NavLink'

export default NavLink

Text.tsx

import React from 'react'
import styled from 'react-emotion'
import {
  fontSize,
  color,
  textAlign,
  fontWeight,
  hover,
  FontSizeProps,
  ColorProps,
  TextAlignProps,
  FontWeightProps,
  HoverProps,
} from 'styled-system'

export type TextProps = FontSizeProps &
  ColorProps &
  TextAlignProps &
  FontWeightProps &
  HoverProps

const Text = styled<TextProps, 'span'>('span')(
  color,
  fontSize,
  fontWeight,
  textAlign,
  hover,
)

Text.displayName = 'Text'

export default Text