Multiple Inheritance (Styled Components)

Question

Please see the code snippets below Is it possible for components to be based on other styled components.

What I would like to do is const HeaderDropDownLi = styled(DropDownLi, HeaderItem)

DropDownLi and HeaderItem are based on a styled component called HorizontalListItem

what I'm currently doing is

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

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

I tried to implement a wrapper so const H = () => <DropDownLi><HorizontalListItem></DropDownLi>

but it doesn't work that way and I eventually pass a children prop like

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

Answer 1

I think you can solved using "css" and exporting a baseStyle and then using it in your components.

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

const baseStyles = css`
  background: #ddd
`;

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

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