Adjust Style based on props with Styled Components

InstructorSara Vieira

Share this video with your friends

Send Tweet

We are going to learn how to add styles to a react component using the styled-components library.

We will get a list of people and give a different color and background color when their position in the list is an even number, like zebra stripes.

Inside of the backticks for our custom styled element, we can interpolate and add in a function that checks if the name in our array is at an even position, it’ll change the text color to white and the background color to black.