DEV Community

Cover image for Style React component with styled-components : Part-1
Shahjada Talukdar
Shahjada Talukdar

Posted on β€’ Edited on

7 3

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.

const StyledSpinner = styled.div`
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;</code>

  @keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
`;
Enter fullscreen mode Exit fullscreen mode

Now we can use this like a react component.

class Spinner extends Component {
  render() {
    return (
      <StyledSpinner />
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

Update Part 2 is available at
Style React component with styled-components : Part-2

Cheers!
πŸ‘‹

As I am trying to contribute contents on the Web, you can buy me a coffee for my hours spent on all of these ❀️😊🌸
Buy Me A Coffee

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

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

Image of Docusign

πŸ› οΈ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more