I have just started working with Styled Components and I 've been running into problems with styling images and I don't mean background images.
export const PrimaryImage = styled.img`
width: 40%;
border-radius: 5px;
height: 50%;
`;That is what I typed but it won't run of course. So I decided to just wrap the image in a div and style the div
export const PrimaryImage = styled.div`
width: 40%;
border-radius: 5px;
height: 50%;
`;The div responds but the image doesn't. Is there a way I can target the image itself without having to use a CSS stylesheet?
Thanks in advance
I've finally figured it out After your div's CSS, you just type in the ampersand character (&) and then the image you are trying to style like the way it's shown below
NOTE: The image has to be inside the specific div before you can access it though
That was how I was able to style the image using Styled Components in ReactJS
I hope this helps anybody that may have this problem and if there's a better way, I'd love to learn
export const PrimaryImage = styled.div`
width: 40%;
border-radius: 5px;
height: 50%;
& > img {
width: 100%;
height: 50%
border-radius: 5px;
`;