多重继承（样式化组件）答案

【问题标题】：Multiple Inheritance (Styled Components)多重继承（样式化组件）
【发布时间】：2020-08-19 10:10:08
【问题描述】：

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

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

【问题讨论】：

标签： javascript css reactjs typescript styled-components

【解决方案1】：

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

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

const baseStyles = css`
  background: #ddd
`;

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

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

【讨论】：