我在理解样式化组件如何处理道具以及使用三元语句控制CSS元素方面遇到了麻烦。这是我已经尝试过的代码，我不明白为什么它不工作。我正试图达到与此类似的效果
<div id={props.data === "blueborder" ? "blueContainer" : "redContainer"}>
如有任何投入，将不胜感激。
<Container></Container>
const Container = styled.div`
display: flex;
align-items: center;
justify-content: center;
border: ${props => props.data === "blueborder" ? "solid blue" : "solid red"};
`;
此代码可以工作，您只是省略了将道具数据传递给容器:<Container data=blueBorder/&>/code>请参阅此沙箱
