Переопределите определение типа эмоции, чтобы реквизит переопределял собственный элемент - PullRequest
Новая
       37

Переопределите определение типа эмоции, чтобы реквизит переопределял собственный элемент

0 голосов
/ 09 июля 2020

Я хочу иметь компонент, который можно было бы использовать аналогично этому: 

<Swatch color={[255, 0, 0]} />

У меня есть определение типа, определенное так: 

interface Props {
  readonly color?: readonly [number, number, number];
}

И я применяю его к HTMLDivElement с использованием следующего синтаксиса 

const Swatch = styled('div')<Props>(
  ({ color }) => color && ({
    backgroundColor: Colors.fromRGB(color),
    '&:hover': {
      backgroundColor: Colors.fromRGB(color).lighten(0.2),
    }
  })
);

Однако возникает конфликт: 

Type 'Props' does not satisfy the constraint 'Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">, "color">'.
  Types of property 'color' are incompatible.
    Type '[number, number, number] | undefined' is not assignable to type 'string | undefined'.

Это имеет смысл, поскольку HTMLDivElement будет иметь color в своем определении

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

...