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

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.
styled-components

Cool, as we expected!

Hope, someone finds this useful.

Cheers!

Standard

Leave a Reply

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