覆盖情绪的类型定义，以便道具覆盖本机元素

Question

我想拥有一个与此类似的组件：

<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和情绪中完成？