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

【问题标题】：How to inherit style from another component?如何从另一个组件继承样式？
【发布时间】：2019-09-15 15:40:51
【问题描述】：

我想从组件“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)`
`;

【问题讨论】：

标签： reactjs styled-components

【解决方案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}`

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

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

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

...

【讨论】：

【解决方案2】：

为什么DropdownTab 是div？

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

【讨论】：