Как наследовать стиль от другого компонента?

Question

Я хочу взять стиль из компонента 'Tab', который является реагирующим маршрутизатором-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 helper:

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

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

...

Answer 2

Почему DropdownTab a div?

Исходя из вашего кода, DropdownTab - это Tab.Вы использовали расширение стилей концепция стилевых компонентов и вы все сделали правильно .