JavaScript, React

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.

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" />;`

Now, I want to add another StyledSpinner without passing any color prop and it should use the default red color.
Let’s see how they look.

Cool, as we expected!

Hope, someone finds this useful.



Leave a Reply

Your email address will not be published. Required fields are marked *