css - Ternary statements in styled components React.js

Question

I am having trouble, understanding how styled components handles props and using a ternary statement to control CSS elements. Here is the code that I have already tried and don't understand why it doesn't work. I am trying to acheive a similar effect to this

<div id={props.data === "blueborder" ? "blueContainer" : "redContainer"}>

Any input would be greatly appreciated.

<Container></Container>

const Container = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  border: ${props => props.data === "blueborder" ? "solid blue" : "solid red"};
`;

Answer 1

This code works you just omit to pass props data to your Container:
<Container data="blueborder"/> see this sandbox