我目前正在开发一个 React 项目，该项目使用 emotion（styled 包）进行 css 样式设置，并使用 typescript（使用 create-react-app 创建）。我对 typescript 比较陌生，在尝试使用与我试图设置样式的基本元素上的属性同名的 props 时遇到了一些困难。

例如，在尝试设置 div 的样式时，如果我构建一个定义 color prop（该 prop 是一个对象）的接口，则在将此接口传递到 styled 函数时会出现错误。我认为它之所以会抱怨，是因为 color 作为一个对象不满足 color 是字符串或未定义的约束，而这个约束是在其他地方设置的（大概是在 emotion styled 函数的类型中？）。下面是我尝试执行的一个基本示例。

import styled from '@emotion/styled';
import { ComponentType } from 'react';

interface ColorPalette {
    blue: string;
    red: string;
}

interface BoxProps {
    color: ColorPalette;
    notColor?: ColorPalette;
}

const Box = styled('div')<BoxProps>(({ color, notColor }) => ({ // Here <BoxProps> shows the error that ColorPalette doesn't satisfy the constraint of string
    color: color.blue,
    backgroundColor: color.red,
}));

const Test: ComponentType = () => <Box color={{ red: 'red', blue: 'blue' }} />; // This doesn't actually show any errors because it recognises that the inputted object matched ColorPalette

export default Box;

本质上，我收到的错误是：“类型‘BoxProps’不满足约束‘Pick, HTMLDivElement>, “color”>, “color”>’。 属性‘color’的类型不兼容。 类型‘{blue:string;red:string}|undefined’不能分配给类型‘string|undefined’。 类型‘{blue:string;red:string}’不能分配给类型‘string’。”

这是一个非常简单的示例，实际上我也在使用 styled-system 库，它创建了一个 color prop，它有可能是一个数组或对象（根据断点设置不同的值），然后将其转换为字符串，但错误是一样的。其他类型的元素也存在同样的问题，例如在 svg 元素上提供 width prop。

我觉得我只是忽略了一些非常基本的东西，我不了解 Typescript 如何解决这个问题。我可以在界面中将 color prop 设置为 any，但这实际上首先会失去类型的值。