Style React component with styled-components : Part-2

In My Previous post Style React component with styled-components : Part-1 , I wrote how we can start using styled-components and we created one Spinner component with it.

Now we can see, how we can pass props to the styled component named StyledSpinner and change the color/behavior of it.

For this example, I will change the border color by passing prop. So, the styled component will show the color what we pass to it.

Let's use props for the border color.

border: 16px solid ${props => props.color || "red"};

Here, we can see, I changed the border color #f3f3f3; to ${props => props.color || "red"} which means if any prop is passed it will use that, otherwise it will use red by default.
Cool!

The implementation of this Styled component will be like this-

const StyledSpinner = styled.div`
  border: 16px solid ${props => props.color || "red"};
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;

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

Now we can use this StyledSpinner in our React Component and pass prop named color.

<StyledSpinner color="#f3f3f3" />

Now, I want to add another StyledSpinner without passing any color prop and it should use the default red color.

render() {
    return (
      <Fragment>
        <StyledSpinner color="#f3f3f3" />
        <hr />
        <StyledSpinner />
      </Fragment>
    );
  }

Let's see how they look.

Cool, as we expected!

Hope, someone finds this useful.

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 ❤️😊🌸

My Blog: https://shahjada.me