Working with Styled Components in ReactJS

Does anyone know how to style images using Styled Components in React?
I can't seem to find a solution anywhere

Comments

[Mykezero]

I'm absolutely terrible with CSS, but maybe something like this will work?
codepen.io/Mykezero/pen/jOaajZK

You can also place the styled component in a separate file and export it to share the style as well. Hopefully this helps! ^^

[Paul C. Ishaili]

First, you can style your component, using a specified class, in a css file, and import the file into your the App.js file. That can work too.

[Rami S. Jaber]

i am java developer for 10 years and just 2 years ago i learned css haha

[Andrew Bone]

What are you trying to achieve?

const Image = styled.img`
  border-radius: 6px;
`

<Image src="image/location.gif" alt="some gif" />

Something like this is how you'd make a styled img tag.

[ΛGΣΣK]

Styled-components just helps you write CSS in JS. It's not a component library, better find a React/JavaScript component that handle images properly (lazy loading, placeholder, caching, responsive, multiple sizes, etc). next/image or lazysizes are good start. Then wrap that image component with style-components to play well with your codebase.

[Paul C. Ishaili]

First, you can style your component, using a specified class, in a scss / css file, and import the file into your the App.js file. That can work too.

[Anietie Brownson]

Thank you all for your suggestions. I figured out a way of doing it without using CSS

I wrapped the image in a div:

export const PrimaryImage = styled.div`
width: 80%;

Then I specifically targeted the image like this:

& > img {
width: 100%;
height: max-content;
border-radius: 15px;
}
`;

I did this in an image.elements.js file and then imported it in my main JS file

Problem solved!