Headless UI Disclosure not working with Styled Components

Question

I have been creating a Headless UI disclosure component in React using Styled components to better manage the Tailwind classes (using Twin Macro too) but get the following error:

No overload matches this call.
  Overload 1 of 2, '(props: {} & { theme?: any; } & { as?: undefined; forwardedAs?: undefined; }): ReactElement<WithOptionalTheme<{} & Partial<{}>, any>, string | JSXElementConstructor<any>>', gave the following error.
    Type 'string' is not assignable to type 'undefined'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"div", any, {}, never, "div", "div">): ReactElement<StyledComponentPropsWithAs<"div", any, {}, never, "div", "div">, string | JSXElementConstructor<...>>', gave the following error.
    Type '({ open }: { open: any; }) => Element' is not assignable to type 'ReactNode'.ts(2769)
index.d.ts(156, 50): The expected type comes from property 'as' which is declared here on type 'IntrinsicAttributes & {} & { theme?: any; } & { as?: undefined; forwardedAs?: undefined; }'
index.tsx(29, 8): Did you mean to call this expression?

Component:

return (
    <StyledDisclosure as="div" key={id}>
      {({ open }) => (
        <>
          <TestButton id={id} {...props} isOpen={open} />
        </>
      )}
    </StyledDisclosure>
  );

StyledDisclosure:

export const StyledDisclosure = styled(Disclosure)`
${tw`space-y-1`}`;

I think the issue is with the open property because when removing it, the error disappears. How would I be able to get the open prop using styled components?

Does anyone know why this is happening? Thanks in advance.

Headless UI Disclosure not working with Styled Components

0 Answers0