Как исправить несовместимость типов свойств цвета в компоненте Box с помощью машинописного текста и эмоций

Question

Я пытаюсь сделать генерала Boxкомпонент реагировать на новый проект. Это будет основа для всех остальных компонентов. Я использую стилизованную систему, эмоции и, в конечном итоге, пользовательский интерфейс темы для оформления и стилизации всех моих компонентов.

Мой корень Box компонент выглядит так:

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)
);

Я использую стилизованные функции вместе со связанными с ними типами из styled-system для создания компонента Box, который принимает свойства пространства, цвета, макета, flexbox, границы и положения.

Ошибка, которую я получаю, происходит только с colorопора Как только я удалю это, я не получаю никаких ошибок.

Ошибка TS:

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)

Кажется, это проблема только при переходе от стилизованных компонентов к эмоциям, поэтому я не уверен, что мне не хватает чего-то, чтобы правильно использовать типы эмоций?

Answer 1

Если у вас есть ошибки с типами «тип» и «как», вы должны переопределить эти типы, прежде чем вставлять их в стилизованные компоненты. Возможно, если вы попробуете переписать свой реквизит, это поможет. Мой пример:

      /* 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

Вы также можетеOmitпротиворечивыйHTMLAttributesот твоегоProps.

Как в:

      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