gaoxiaoliangz/react-scoped-css

data attribute is not applied to elements created from components that are not accessed directly

Opened this issue · 0 comments

Basically, this

<HDialog open={open} static onClose={onClose} className="dialog">
	<HDialog.Overlay className="dialog-overlay" />
	<HDialog.Title className="dialog-title">{title}</HDialog.Title>
	<HDialog.Description className="dialog-description">{description}</HDialog.Description>
	{children}
</HDialog>

does not work, but this

const Overlay = HDialog.Overlay
const Title = HDialog.Title
const Description = HDialog.Description
const dialog = <HDialog open={open} static onClose={onClose} className="dialog">
	<Overlay className="dialog-overlay" />
	<Title className="dialog-title">{title}</Title>
	<Description className="dialog-description">{description}</Description>
	{children}
</HDialog>

does.

This has led to false bug reports like tailwindlabs/headlessui#696 because I didn't take it into a debugger and closely inspect the props being passed down