Imagine I have these specific styles:
color: black;
border: 1px solid white;
and now I want to apply them to two different elements:
const SomeImg = styled.img`
margin: 2em;
`;
const SomeDiv = styled.div`
margin: 3em;
`;
How can I make sure that both elements inherit those styles?
If they were both <div>
or <img>
, it would be simple. Here's how:
const ExtendMe = styled.div`
color: black;
border: 1px solid white;
`;
const SomeDiv = styled(ExtendMe)`
margin: 2em;
`;
const OtherDiv = styled(ExtendMe)`
margin: 3em;
`;