apply style when native dialog is open

[jim-king-2000]

I'm using native dialog with heroui v3. I wanna apply .modal__dialog style to the native dialog.

<dialog id='my-dialog' className='inset-0 m-auto modal__dialog'>

But it will prevent the native dialog from being hidden (.modal__dialog changes positioning).

So I switch to apply the style only when it's open.

<dialog id='my-dialog' className='inset-0 m-auto open:modal__dialog'>

But it does not apply .modal__dialog at all.

How to apply .modal__dialog to native dialog when it's open?

[wongjn]

Conditionally add it to the DOM element:

<dialog id='my-dialog' className={`inset-0 m-auto ${isOpen ? 'modal__dialog' : ''}`}>

You cannot use variants with the modal__dialog since it is not a Tailwind utility class name.

[jim-king-2000]

Here is the code:

<Button
  render={(domProps) => (
    <button {...domProps} command='show-modal' commandfor='my-dialog' />
  )}
>
  Open dialog
</Button>

<dialog
  id='my-dialog'
  className={`inset-0 m-auto ${isOpen ? 'modal__dialog' : ''}`}
>
  <p>This dialog was opened using an invoker command.</p>
  <Button
    render={(domProps) => (
      <button {...domProps} command='close' commandfor='my-dialog' />
    )}
  >
    Close
  </Button>
</dialog>

There is no isOpen.

[wongjn]

You could consider implementing the isOpen variable so that it tracks whether the <dialog> is open.

[jim-king-2000]

This would be a workaround.

<dialog
  id='my-dialog'
  className='inset-0 m-auto modal__dialog [&:not([open])]:hidden'
>

[RobinMalfait]

You could possibly write this as not-open:hidden

[jim-king-2000]

You could possibly write this as not-open:hidden

That is really cool!