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-

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

<StyledSpinner color="#f3f3f3" />