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

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

也许你可以使用 as?

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 概念并且 您做得对。

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

How to inherit style from another component?

reactjs

styled-components