reactjs - 类型“未定义”不可分配给类型“默认”| “红” | “绿色” | “蓝色的”

Question

我在我的应用程序中使用 React 和 TypeScript。如何摆脱以下错误？

import { styled } from "linaria/react";

type Color = {
  color: "default" | "red" | "green" | "blue";
};


const handleColorType = ({ color }: Color) => {
  switch (color) {
    case "default":
      return "#03a9f3";
    case "red":
      return "#f56342";
    case "green":
      return "#f56342";
    case "blue":
      return "#f56342";
    default:
      return "#fff";
  }
};

export const Title = styled.h1`
  font-size: 50px;
  display: inline-flex;
  margin: 150px auto 0;
  color: ${({ color }) => handleColorType({ color // <---- here I get the error })};
`;

然后我得到这个打字稿错误：

（属性）颜色：“默认”| “红” | “绿色” | “蓝色”类型'字符串| undefined' 不可分配给类型 '"default" | “红” | “绿色” | “蓝色的”'。类型“未定义”不可分配给类型“默认”| “红” | “绿色” | "blue"'.ts(2322) color.ts(2, 3): 预期的类型来自属性'color'，它在'Color'类型上声明

Answer 1

尝试在样式组件中将道具类型定义为颜色

 color: ${({ color }: Color) => handleColorType({ color })};

因为现在它只是可选字符串