Множественное наследование (стилизованные компоненты)

Question

См. Фрагменты кода ниже. Возможно ли, чтобы компоненты были основаны на других стилизованных компонентах.

Я бы хотел сделать const HeaderDropDownLi = styled(DropDownLi, HeaderItem)

DropDownLi и HeaderItem основаны на стилизованный компонент под названием HorizontalListItem

то, что я сейчас делаю, это

const HeaderItem = styled(HorizontalListItem)`
    background: #ddd
`;

const HeaderDropDownLi = styled(DropDownLi)`   
    background: #ddd
`;

Я попытался реализовать оболочку, поэтому const H = () => <DropDownLi><HorizontalListItem></DropDownLi>

, но это не работает путь, и в конце концов я передаю опору для детей, например

    <HeaderDropDownLi 
        onClick={() => onClick(value)} 
        className={activeTab===value ? 'active' : ''}>
        <Dropbtn>{value}</Dropbtn>
        <DropDownContent style={contentStyle}>
            {" "}
            {children}
        </DropDownContent>
    </HeaderDropDownLi>
)``` 

Answer 1

Я думаю, вы можете решить, используя «css» и экспортируя baseStyle, а затем используя его в своих компонентах.

import styled, { css } from ‘styled-components’;

const baseStyles = css`
  background: #ddd
`;

const HeaderItem = styled(HorizontalListItem)`
  ${baseStyles}
`;

const HeaderDropDownLi = styled(DropDownLi)`   
  ${baseStyles}
`;