Remove @emotion/styled dependency

Hey,

If i use Box and then i apply ref forwarding on a new component called button. It would seem that in typescript when using forward ref it seems that box is set to HTMLDivElement and if i supply HTMLButtonElement we get error that it needs to be a div element, i assume this is to do with the ‘as’ prop?

Just wandered what i’m doing wrong - i even tried the typings for ForwardRef and it still did not work. TS version 4.0.2

for example:

import * as React from 'react';
import { Box, BoxProps } from 'my-lib';

export interface IButtonProps extends BoxProps {
  label: string;
  variant?: 'primary' | 'secondary' | 'tertiary';
  children: React.ReactNode;
}

const Button = React.forwardRef<
  HTMLButtonElement,
  IButtonProps,
>(({ label = 'change me', variant = 'primary', ...rest }, ref) => {
  return (
    <Box
      as="button"
      ref={ref}
      variant={variant}
      aria-label={label}
      {...rest}
    />
  );
});

export { Button };

Type '((instance: HTMLButtonElement | null) => void) | MutableRefObject<HTMLButtonElement | null> | null' is not assignable to type 'string | ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined'.
  Type '(instance: HTMLButtonElement | null) => void' is not assignable to type 'string | ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined'.
    Type '(instance: HTMLButtonElement | null) => void' is not assignable to type '(instance: HTMLDivElement | null) => void'.
      Types of parameters 'instance' and 'instance' are incompatible.
        Type 'HTMLDivElement | null' is not assignable to type 'HTMLButtonElement | null'.
          Type 'HTMLDivElement' is missing the following properties from type 'HTMLButtonElement': disabled, form, formAction, formEnctype, and 13 more.ts(2322)
index.d.ts(143, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & Pick<...> 

for now my fix is lame but its all i have got 😉 ref={ref as any}

looking on emotion comments and it looks like the as prop has been thought about by different source - maybe a good reference?

https://github.com/kripod/react-polymorphic-box/blob/main/src/Box.tsx

Thanks in advance 😉

[hasparus]

could support the ‘As’ prop like Chakra, looks like they made significant progress over the last month, then that would be an amazing feature

I’ve spent a bunch of time fiddling with it, and I’m not convinced it’s an amazing feature. TypeScript compilation times suffer drastically in large codebases using as prop (I even managed to get an OOM 😄). It’s a really cool gun to shoot oneself in the foot. I did it, and I’d strongly advise to use sx prop with jsx pragma in TypeScript.

Pretty soon, with React Automatic Runtime, you won’t even need /** @jsx jsx */ comment.

Additional context:

https://blog.andrewbran.ch/polymorphic-react-components/

[lachlanjc]

Papertrail: we deprecated .withComponent some time ago & will be fully removing it soon.