Can components be based on other styled components? Take a look at the code snippets below.
I am interested in creating a component like this:
const HeaderDropDownLi = styled(DropDownLi, HeaderItem)Both DropDownLi and HeaderItem are derived from a styled component named HorizontalListItem.
Currently, I am styling the components as follows:
const HeaderItem = styled(HorizontalListItem)`
background: #ddd
`;
const HeaderDropDownLi = styled(DropDownLi)`
background: #ddd
`;
I attempted to use a wrapper like this:
const H = () => <DropDownLi><HorizontalListItem></DropDownLi>However, this approach didn't work as expected, leading me to pass a children prop like this:
<HeaderDropDownLi
onClick={() => onClick(value)}
className={activeTab === value ? 'active' : ''}>
<Dropbtn>{value}</Dropbtn>
<DropDownContent style={contentStyle}>
{" "}
{children}
</DropDownContent>
</HeaderDropDownLi>