Working with Styled Components in ReactJS
source link: https://dev.to/anni/working-with-styled-components-in-reactjs-14
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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
Discussion (6)
Collapse
Expand
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! ^^
Collapse
Expand
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.
Collapse
Expand
What are you trying to achieve?
const Image = styled.img`
border-radius: 6px;
`
<Image src="image/location.gif" alt="some gif" />
Enter fullscreen mode
Exit fullscreen mode
Something like this is how you'd make a styled img tag.
Collapse
Expand
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.
Collapse
Expand
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.
Collapse
Expand
i am java developer for 10 years and just 2 years ago i learned css haha
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK