// Card.js const ContainerCard = styled.div` width: 50px; height: 50px; `; const Card = ({ className }) => { return <ContainerCard className={className} />; }; // Use any valid prop, Card.StyledComponent, Card.Style etc. Card.className = ContainerCard; export default Card; // App.js const Container = styled.div` height: 100vh; width: 100vw; `; // Styling custom components, through className prop. const VioletredRedCard = styled(Card)` background-color: palevioletred; `; // Target the component generated by styled-components const CardWrapper = styled.div` ${Card.className} { width: 100px; height: 100px; background-color: paleturquoise; } `; const App = () => { return ( <Container> <CardWrapper> <Card /> </CardWrapper> <VioletredRedCard /> </Container> ); };
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter