Equivalence of Styled component way of thing in Panda css

[AsuraKev]

Hi there,

I am looking at transitioning from Styled component to Panda css, however I dont see the following being mentioned in the docs around below two scenario

Scenario 1:
In styled component's styled() method, you can pass a component e.g

const Element = styled(Button) -> this way it can override third party component style easily. Is this achievable in panda css?

Scenario 2:
Dynamic css property based on props e.g

const Button = styled.div<{isTrue: boolean}>`
backgroundColor: ${(props) => props.isTrue? 'red' : 'white'}

${(props) => {
props.isTrue && css backgroundColor: 'white'
}}
`

thanks a lot! :)

[astahmer]

Scenario 1 -> yes, that works

---

Scenario 2:

there's no such thing as an inline callback like the backgroundColor: ${(props) => props.isTrue? 'red' : 'white' with Panda styled factory

1. you can directly reference your theme tokens like this: color: 'colorBg'
2. you can also use compoundVariants to handle props-based variants
3. you can also just use styled inside one of your custom component and deal with that logic in there