Acabo de empezar a trabajar con componentes con estilo y he tenido problemas con el estilo de las imágenes y no me refiero a las imágenes de fondo.
export const PrimaryImage = styled.img` width: 40%; border-radius: 5px; height: 50%; `;Eso es lo que escribí, pero no funcionará, por supuesto. Así que decidí simplemente envolver la imagen en un div y diseñar el div
export const PrimaryImage = styled.div` width: 40%; border-radius: 5px; height: 50%; `;El div responde pero la imagen no. ¿Hay alguna manera de orientar la imagen en sí sin tener que usar una hoja de estilo CSS?
Gracias por adelantado
Finalmente lo descubrí Después del CSS de su div, simplemente escriba el carácter de y comercial (&) y luego la imagen que está tratando de diseñar como se muestra a continuación.
NOTA: La imagen debe estar dentro del div específico antes de poder acceder a ella.
Así fue como pude diseñar la imagen usando Styled Components en ReactJS
Espero que esto ayude a cualquiera que pueda tener este problema y si hay una mejor manera, me encantaría aprender.
export const PrimaryImage = styled.div` width: 40%; border-radius: 5px; height: 50%; & > img { width: 100%; height: 50% border-radius: 5px; `;