sx types added to Transition from @headlessui/react make props type too large to represent in TypeScript

[RishikeshDarandale]

Using headlessui/react library components like Dialog, getting an ts error as Expression produces a union type that is too complex to represent.ts(2590)

/** @jsx jsx */
import { Dialog, Transition } from '@headlessui/react';
import { FunctionComponent, } from 'react';
import { Box, jsx } from 'theme-ui';

interface Props {
};

const Abcd: FunctionComponent<Props> = (
  props: Props
) => {
   return (
    <Box>
      <Transition>
      </Transition>
    </Box>
  );
};

Anybody knows how to resolve this error?

[hasparus]

Are you getting it on Box?

[RishikeshDarandale]

It's happening on Transition / Dialog component of headlessui. Let me create a sample project.

[RishikeshDarandale]

Created a repository to showcase the issue and issue is documented in README as well.

[hasparus]

Sadlly, I don't think there are any satisfying solutions for ts(2590). Types for sx are quite large, an types for Headless UI components are also pretty complex. 👇

You can work around it with as any or use Transition and Dialog in files where TypeScript doesn't know about the pragma.

[RishikeshDarandale]

Thanks @hasparus . Yes, I saw that there is no solution to typescript error. I created this one to check if there are better work around.

Can you please elaborate more on using any?

If I use, those components without pragma in the file means I need to style them using classNames. Are there any guideline from theme-ui to style the component without sx and css props?

Is there any roadmap for theme-ui to add more components like dialog, etc?