在样式组件中使用道具更改内部HTML

Question

我想在react中添加一个样式化的组件并在其中传递道具。取决于道具，内部html应当更改。那么，是否有一些CSS属性或其他可以根据自己的道具在组件内部动态添加文本的属性？我可以做这样的事情吗？

const Container = styled.div<DateProps>`
background: ${props => props.date ? "green" : "red"
content: ${props => props.date ? "Your have an appointment" : "You don't have appointment"};`




<Container date />

这样做有点胆怯：

date ? <Container> You have an appointment </Container> : <Container> Your don't have an appointment: </Container>