primitive dialog strips out radix/themes styles

[aryankarim]

Are we not allowed to use themes components inside primitive dialog? or am I missing something here?

    <Dialog.Root>
      <Dialog.Trigger asChild>
        <Button  variant="soft"> // style works
              Button
        </Button>
      </Dialog.Trigger>

      <Dialog.Portal>
        <Dialog.Overlay />
        <Dialog.Content >
          <Dialog.Close asChild>
            <Button variant="soft"> // styles does not work
              Button
            </Button>
          </Dialog.Close>
          <Dialog.Title >
            Edit profile
            <Tooltip content="Add to library">
              <IconButton radius="full"> // styles does not work
                <PlusIcon />
              </IconButton>
            </Tooltip>
            <Button variant="soft"> // styles does not work
              Button
            </Button>
          </Dialog.Title>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>

[aryankarim]

Not sure if this is the correct solution. But I found out that portal takes the dialog to body where it is outside the theme HOC. So I removed the Portal and it works fine now.

I tried using Dialog.Portal's container teleporting it inside the radix theme HOC, but then the open trigger did not work for some reason.

[suitux]

Same here

[suitux]

Here is my wrapper for NextJS:

import { ComponentProps } from 'react'
import * as RadixPopover from '@radix-ui/react-popover'
import classNames from 'classnames'
import ClientPortal from '@/components/lib/ClientPortal'

const Popover = RadixPopover.Root
export const PopoverTrigger = RadixPopover.Trigger
export const PopoverArrow = RadixPopover.Arrow
export const PopoverAnchor = RadixPopover.Anchor
export const PopoverPortal = ClientPortal

export interface PopoverContentProps extends ComponentProps<typeof RadixPopover.Content> {}

export const PopoverContent = ({ children, className, ...props }: PopoverContentProps) => (
  <RadixPopover.Content
    {...props}
    className={classNames('w-[var(--radix-popover-trigger-width)] p-4 shadow-lg', className)}>
    {children}
  </RadixPopover.Content>
)

export default Popover

And the portal:

'use client'

import { useRef, useEffect, useState, ReactNode } from 'react'
import { createPortal } from 'react-dom'

interface PortalProps {
  children: ReactNode
}

const ClientPortal = (props: PortalProps) => {
  const ref = useRef<Element | null>(null)
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    ref.current = document.querySelector<HTMLElement>('#portal')
    setMounted(true)
  }, [])

  return mounted && ref.current ? createPortal(props.children, ref.current) : null
}

export default ClientPortal