apply style when native dialog is open #19963
Replies: 3 comments 3 replies
-
|
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 |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
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 |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
This would be a workaround. <dialog
id='my-dialog'
className='inset-0 m-auto modal__dialog [&:not([open])]:hidden'
> |
Beta Was this translation helpful? Give feedback.
2 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
I'm using native dialog with heroui v3. I wanna apply
.modal__dialogstyle to the native dialog.But it will prevent the native dialog from being hidden (
.modal__dialogchanges positioning).So I switch to apply the style only when it's open.
But it does not apply
.modal__dialogat all.How to apply
.modal__dialogto native dialog when it's open?Beta Was this translation helpful? Give feedback.
All reactions