多重继承（样式化组件）

Posted 2023-02-22

【中文标题】多重继承（样式化组件）

【英文标题】：Multiple Inheritance (Styled Components)

【发布时间】：2020-08-19 10:10:08

【问题描述】：

请看下面的代码sn-ps 组件是否可以基于其他样式的组件。

我想做的是const HeaderDropDownLi = styled(DropDownLi, HeaderItem)

DropDownLi 和 HeaderItem 基于一个名为 Horizo​​ntalListItem 的样式化组件

我现在正在做的是

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>
)``` 

【参考方案1】：

我认为您可以使用“css”并导出 baseStyle 然后在您的组件中使用它来解决。

import styled,  css  from ‘styled-components’;

const baseStyles = css`
  background: #ddd
`;

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

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