how can i style same type of elements but diffrent ones with diffrent css properties in styled components ? for example
<div></div>
<div></div>
with knowledge i have i can do
export const StyledDiv = styled.div`
color:red;
`
and change <div></div> to <StyledDiv></StyledDiv>
but what if I want to change each of these divs with different styles? for example, I want one of them to have the color blue one and of them to have the color red
and these 2 elements are just for example to show you the meaning
now imagine a page with 10s of divs each with different style
What's the best way to deal with them?
You can simply pass props to the styled component like so:
const StyledDiv = styled.div`
color: ${props => props.color};
`;
And in your component:
return <StyledDiv color="red">...</div>;