时间戳

首页 > 解决方案 > 为什么styled-components中的Color模块会报错

reactjs - 为什么styled-components中的Color模块会报错

问题描述

我使用的环境是react + typescript，@types/color模块已经安装好了。当我使用${props = > color（ props.theme.red ）}Times 错误时。

如下：

import styled from 'styled-components';
import colour from 'color';

const PercentUI = styled.p`
    color: ${(props) => colour(props.theme.red).darken(0.5)};
    font-weight: bold;
    font-size: 28px;
    text-align: center;
`;

报告

没有重载匹配此调用。重载 1 of 3, '(first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes, HTMLParagraphElement>, "slot" | ... 253 更多 ... | "onTransitionEndCapture"> & { ...; } , any>>, ...rest: Interpolation<...>[]): StyledComponent<...>'，给出以下错误。类型参数 '(props: ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes, HTMLParagraphElement>, "slot" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, any>) => Color< ...>' 不能分配给 'Interpolation<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes, HTMLParagraphElement>, "slot" | 类型的参数 ... 253 更多 ... | "onTransitionEndCapture"> & { ...; }，任何>>'。类型 '(props: ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes, HTMLParagraphElement>, "slot" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, any>) => Color<.. .>' 不可分配给类型 'InterpolationFunction<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes, HTMLParagraphElement>, "slot" | ... 253 更多... | "onTransitionEndCapture"> & { ...; }，任何>>'。类型 'Color' 不可分配给类型 'Interpolation<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes, HTMLParagraphElement>, "slot" | ... 253 更多... | "onTransitionEndCapture"> & { ...; }，任何>>'。类型 ' 颜色”不可分配给类型“CSSObject”。属性“旋转”的类型不兼容。类型 '(degrees: number) => Color' 不可分配给类型 '"inherit" | “无” | (字符串 & {}) | “-moz-initial” | “初始” | “还原” | “未设置” | 不明确的'。类型 '(degrees: number) => Color' 不可分配给类型 '"unset"'。重载 2 of 3, '(first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes, HTMLParagraphElement>, "slot" | ... 253 更多 ... | "onTransitionEndCapture"> & { ...; } & object, any>>, ...rest: Interpolation<...>[]): StyledComponent<...>'，给出以下错误。类型参数 '(props: ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes, HTMLParagraphElement>, "slot" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, any>) => Color< ...>' 不能分配给 'Interpolation<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes, HTMLParagraphElement>, "slot" | 类型的参数 ... 253 更多... | "onTransitionEndCapture"> & { ...; } & 对象，任何>>'。类型 '(props: ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes, HTMLParagraphElement>, "slot" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, any>) => Color<.. .>' 不可分配给类型 'InterpolationFunction<ThemedStyledProps<Pick< 详细HTMLProps<HTMLAttributes, HTMLParagraphElement>, "slot" | ... 253 更多... | "onTransitionEndCapture"> & { ...; } & 对象，任何>>'。类型 'Color' 不可分配给类型 'Interpolation<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes, HTMLParagraphElement>, "slot" | ... 253 更多... | "onTransitionEndCapture"> & { ...; } & 对象，任何>>'。类型“颜色”不可分配给类型“CSSObject”。HTMLParagraphElement>, "槽" | ... 253 更多... | "onTransitionEndCapture"> & { ...; } & 对象，任何>>'。类型“颜色”不可分配给类型“CSSObject”。HTMLParagraphElement>, "槽" | ... 253 更多... | "onTransitionEndCapture"> & { ...; } & 对象，任何>>'。类型“颜色”不可分配给类型“CSSObject”。

我该怎么办？T_T

标签： reactjstypescriptcolorsstyled-components

解决方案

推荐阅读