How to fix 'Types of property 'color' are incompatible' on Box component using typescript and emotion

Question

I'm attempting to make a general Box react component on a new project. This will be the base of all other components. I'm using styled-system, emotion, and eventually theme-ui to handle themeing and styling of all my components.

My root Box component looks like this:

import styled from '@emotion/styled';
import {
  compose,
  space,
  layout,
  flexbox,
  border,
  position,
  color,
  SpaceProps,
  ColorProps,
  LayoutProps,
  FlexboxProps,
  BorderProps,
  PositionProps,
} from 'styled-system';

export type BoxProps = SpaceProps &
  ColorProps &
  LayoutProps &
  FlexboxProps &
  BorderProps &
  PositionProps;

export const Box = styled.div<BoxProps>(
  {
    boxSizing: 'border-box',
    minWidth: 0,
  },
  compose(space, color, layout, flexbox, border, position)
);

I'm using styled functions along with their associated types from styled-system to create a Box component that accepts space, color, layout, flexbox, border, and position props.

The error I'm getting is happening only with the color prop. Once I remove that I don't get any errors.

The TS error is:

Type 'BoxProps' does not satisfy the constraint 'Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">, "color">'.
  Types of property 'color' are incompatible.
    Type 'string | number | symbol | (string | number | symbol | null)[] | { [x: string]: string | number | symbol | undefined; [x: number]: string | number | symbol | undefined; } | null | undefined' is not assignable to type 'string | undefined'.
      Type 'null' is not assignable to type 'string | undefined'.ts(2344)

This seems to only be an issue when moving from styled-components to emotion, so I'm not sure if there's something I'm missing to properly utilize emotion's types?

Answer 1

If you have errors with types "type" and "as" you should redefine these types before insert these in styled components. Perhaps, if you try to rewrite your props, it will help. My example:

/* Button component */
const Button: React.FC<ButtonProps> = ({
  isLoading,
  children,
  // should redefine this types, because React.HTMLProps<HTMLButtonElement> has incompatible similar types
  type = 'button',
  as = undefined,
  ...props
}: ButtonProps, ...others) => {
  return (
    <StyledButton {...props} {...others}>
      {isLoading ? 'Loading...' : children}
    </StyledButton>
  );
};

export default Button;

Answer 2

You could also Omit conflicting HTMLAttributes from your Props.

As in:

interface Props {
  color?: string
}

// omit any prop in React.HTMLAttributes that is declared in Props
type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>

export type ButtonProps = Props & NativeAttrs