Style React component with styled-components : Part-1

Styling your React component is an important part for any real world application.
We can style react components in a couple of ways. such as –
1. inline styling
2. CSS modules
3. emotion
4. styled-components

We will talk about styled-components in this article.

We are gonna create one simple animated loading spinner component.

We can install the package from npmjs using npm or yarn cli.
npm i styled-components --save
Or
yarn add styled-components

We can import that in our Component module like
import styled from "styled-components";

Now I will use the styled API to create the spinner.We are using one DIV as a target for that spinner.

Now we can use this like a react component.

We don’t need any other tool or webpack to build this css. It will work just fine.

I will continue writing more on styled-components.

Till then.
Cheers!
👋

PS: You can also have a look on my blog site https://shahjada.me