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

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

DropDownLi and HeaderItem are based on a styled ponent 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>
)``` 

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

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

DropDownLi and HeaderItem are based on a styled ponent 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>
)``` 

• javascript
• css
• reactjs
• typescript
• styled-ponents

Share Improve this question Follow asked May 4, 2020 at 20:54 user7480665user7480665

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

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

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

const baseStyles = css`
  background: #ddd
`;

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

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