¿Cómo puedo diseñar el mismo tipo de elementos pero diferentes con diferentes propiedades css en componentes con estilo? por ejemplo
<div></div> <div></div>con el conocimiento que tengo puedo hacer
export const StyledDiv = styled.div` color:red; ` y cambie <div></div> a <StyledDiv></StyledDiv> pero ¿qué pasa si quiero cambiar cada uno de estos divs con diferentes estilos? por ejemplo, quiero que uno de ellos tenga el color azul y uno de ellos tenga el color rojo y estos 2 elementos son solo por ejemplo para mostrarte el significado ahora imagina una página con 10s de divs cada uno con un estilo diferente ¿Qué es lo mejor? manera de lidiar con ellos?
Simplemente puede pasar accesorios al componente con estilo de la siguiente manera:
const StyledDiv = styled.div` color: ${props => props.color}; `;Y en tu componente:
return <StyledDiv color="red">...</div>;