多重继承（样式化组件）

Question

请参阅下面的代码片段组件是否可以基于其他样式的组件。

我想做的是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>
)``` 

Answer 1

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

\n\n

import styled, { css } from \xe2\x80\x98styled-components\xe2\x80\x99;\n\nconst baseStyles = css`\n  background: #ddd\n`;\n\nconst HeaderItem = styled(HorizontalListItem)`\n  ${baseStyles}\n`;\n\nconst HeaderDropDownLi = styled(DropDownLi)`   \n  ${baseStyles}\n`;\n

\n