How to write dynamica CSS in Qwik?

Question

I have this code in Next.js:

        <div
            className={"bg-white origin-top transition-all duration-300 absolute z-50 w-full"}
            style={isOpen ? {} : { transform: 'rotateX(90deg)' }}
        >

As you can see, I'm using style attribute to conditionally apply some CSS on an element. The isOpen is a state here.

How can I write it for Qwik. I tried the following and it did not work:

        <div
            class={"bg-white origin-top transition-all duration-300 absolute z-50 w-full"}
            style={isOpen ? {} : { transform: 'rotateX(90deg)' }}
        >

Answer 1

You can have conditional style with Signals

Here is an example:

style={`${
  isOpenSig.value ? {} : { transform: 'rotateX(90deg)' }
}`}

Here is a similar question for class https://stackoverflow.com/posts/76452479/edit