DEV Community

Discussion on: Introduction to Styled Components

Collapse
 
agronick profile image
Kyle Agronick

Where is props coming from in the second to last example? Is it something that is transpiled in?

Collapse
 
ogwurujohnson profile image
Johnson Ogwuru • Edited

We passed the props a code example above, when we did something like this:

<DivWrapper
    color= 'blue'
  >

  </DivWrapper>
Collapse
 
dance2die profile image
Sung M. Kim • Edited

When you pass a prop to DivWrapper, <DivWrapper color='blue'>...</DivWrapper>

styled will pass the prop and make it available auto"magically".

  const DivWrapper = styled.div`
    width: 50%;
    border: 2px solid black;
    ${props => (props.color === 'blue') ? `background-color: blue`: null}
    ${props => (props.color === 'red' ? `background-color: red`: null)}
  `;

And @ogwurujohnson , Shouldn't the color prop passed as my example above instead of like <DivWrapper color: 'blue'>?

Collapse
 
ogwurujohnson profile image
Johnson Ogwuru

Yeah, you are right. Lol was a typo. Would correct that immediately.