Question

我想从组件'Tab'中获取样式，这是一个react-router-dom Navlink ，并将其应用于我的新组件'DropdownTab'中是'div'。如何在不使它成为NavLink的情况下继承样式？我想这样做是为了避免重复的代码行。

const Tab = styled(NavLink)`
  padding: 0 20px;
  height: ${variables.height};
  line-height: ${variables.height};
`;

// Should be the component 'Menu' and is now the component NavLink
const DropdownTab = styled(Tab)`
`;

Answer 1

也许您可以使用documentation？

const DropdownTab = styled(props => <Tab as="div" {...props} />)`
  /* additional styles */
`;

这很丑陋，所以也许您可以将常用样式提取到变量中：

const commonStyles = `
  /* common styles */
`

const Tab = styled(NavLink)`${commonStyles}`
const DropdownTab = styled('div')`${commonStyles}`

如果您的组件中具有基于道具的样式（即color: ${props => props.color}，则需要使用css助手：

import styled, { css } from 'styled-components'

const commonStyles = css`
  color: ${({ isActive }) => isActive ? 'red' : 'blue' };
`

...

Answer 2

为什么DropdownTab是div？

根据您的代码，DropdownTab是Tab。您已经使用了样式组件的extending styles概念，并且您做对了。

如何从另一个组件继承样式？

2 个答案: