css?：Interpolation<{}>在React中使用TypeScript

Question

当我使用ChakraUI时，我有一个相当简单的需求来添加和传播一些css对象。所以所有的东西都是内联的。所以我认为主要的问题是"& > div"

然而，正如您从一个TS错误中看到的那样，css也被标记了，但遗憾的是，我想不出一个好的理由。

头像/index.tsx

<Image
  {...props}
  src={src}
  objectFit="cover"
  data-testid="avatar"
  styles={{
    width: `${width}px`,
    height: `${height}px`,
    "& > div": {
      overflow: "hidden",
      borderRadius: width,
      position: "relative",
    },
  }}
/>

​

type Props = ImageProps & {
  type?: string
  layout?: never
  src?: string
  fillColor?: string
  derivative?: string
  "data-testid"?: string
  styles?: {
    width?: string
    height?: string
    "& > div"?: {
      overflow?: string
      borderRadius?: number
      position?: string
    }
  }
}

export const Image: React.FC<Props> = ({
  objectFit,
  type,
  src,
  width,
  height,
  unoptimized,
  fillColor,
  derivative,
  styles,
  ...props
}) => {    
  const css =
    objectFit === "cover"
      ? {
          ...styles,
          transition: "height 0.5s ease-in",
          height: "100%",
          "& > div": {
            position: "initial !important",
            ...(styles && styles["& > div"] && { ...styles["& > div"] }),
            width: "100%",
            height: "100%",
            marginBottom: `${margin} !important`,
          },
          "& > div > div": {
            height: "100%",
          },
        }
      : styles

  return (
    <Box
      css={css}
    >
    //.... stuff....
    </Box>
  )
}

Image.defaultProps = {
  type: "standard",
  objectFit: "cover",
  fillColor: "white",
}

TS错误

components/Avatar/index.tsx:15:6 - error TS2322: Type '{ src: string; objectFit: "cover"; "data-testid": string; styles: { width: string; height: string; "& > div": { overflow: string; borderRadius: number; position: string; }; }; width?: number; height?: number; children?: ReactNode; }' is not assignable to type '(IntrinsicAttributes & Pick<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "key" | ... 258 more ... | "useMap"> & { ...; } & { ...; } & { ...; } & { ...; }) | (IntrinsicAttributes & ... 4 more ... & { ...; }) | (IntrinsicAttributes & ... 4 more ... & { ...; })'.
  Type '{ src: string; objectFit: "cover"; "data-testid": string; styles: { width: string; height: string; "& > div": { overflow: string; borderRadius: number; position: string; }; }; width?: number; height?: number; children?: ReactNode; }' is not assignable to type '{ width: ReactText; height: ReactText; layout?: "intrinsic" | "fixed" | "responsive"; }'.
    Property 'width' is optional in type '{ src: string; objectFit: "cover"; "data-testid": string; styles: { width: string; height: string; "& > div": { overflow: string; borderRadius: number; position: string; }; }; width?: number; height?: number; children?: ReactNode; }' but required in type '{ width: ReactText; height: ReactText; layout?: "intrinsic" | "fixed" | "responsive"; }'.

15     <Image
        ~~~~~

components/Image/index.tsx:118:7 - error TS2322: Type '{ width?: string; height?: string; "& > div"?: { overflow?: string; borderRadius?: number; position?: string; }; } | { transition: string; height: string; "& > div": { width: string; height: string; marginBottom: string; overflow?: string; borderRadius?: number; position: string; }; "& > div > div": { ...; }; width?...' is not assignable to type 'Interpolation<{}>'.
  Type '{ width?: string; height?: string; "& > div"?: { overflow?: string; borderRadius?: number; position?: string; }; }' is not assignable to type 'Interpolation<{}>'.
    Type '{ width?: string; height?: string; "& > div"?: { overflow?: string; borderRadius?: number; position?: string; }; }' is not assignable to type 'CSSObject'.
      Property '"& > div"' is incompatible with index signature.
        Type '{ overflow?: string; borderRadius?: number; position?: string; }' is not assignable to type 'CSSInterpolation'.
          Type '{ overflow?: string; borderRadius?: number; position?: string; }' is not assignable to type 'CSSObject'.
            Types of property 'position' are incompatible.
              Type 'string' is not assignable to type '"-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "fixed" | "-webkit-sticky" | "absolute" | "relative" | "static" | "sticky" | Position[]'.

118       css={css}
          ~~~

  node_modules/@chakra-ui/system/dist/types/system.types.d.ts:54:5
    54     css?: Interpolation<{}>;
           ~~~
    The expected type comes from property 'css' which is declared here on type 'IntrinsicAttributes & { as?: ElementType<any>; } & ChakraProps & Pick<any, string | number | symbol> & Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | ... 253 more ... | "is">, "key" | ... 253 more ... | "is">'

components/Image/index.tsx:131:9 - error TS2322: Type '{ css: { width?: string; height?: string; "& > div"?: { overflow?: string; borderRadius?: number; position?: string; }; }; width: number; height: number; src: string; objectFit: ObjectFit; unoptimized: boolean; ... 266 more ...; "data-testid"?: string; } | { ...; } | { ...; }' is not assignable to type '(IntrinsicAttributes & Pick<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "key" | ... 258 more ... | "useMap"> & { ...; } & { ...; }) | (IntrinsicAttributes & ... 2 more ... & { ...; }) | (IntrinsicAttributes & ... 2 more ... & { ...; })'.
  Type '{ css: { width?: string; height?: string; "& > div"?: { overflow?: string; borderRadius?: number; position?: string; }; }; width: number; height: number; src: string; objectFit: ObjectFit; unoptimized: boolean; ... 266 more ...; "data-testid"?: string; }' is not assignable to type '(IntrinsicAttributes & Pick<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "key" | ... 258 more ... | "useMap"> & { ...; } & { ...; }) | (IntrinsicAttributes & ... 2 more ... & { ...; }) | (IntrinsicAttributes & ... 2 more ... & { ...; })'.
    Property 'css' does not exist on type '(IntrinsicAttributes & Pick<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "key" | ... 258 more ... | "useMap"> & { ...; } & { ...; }) | (IntrinsicAttributes & ... 2 more ... & { ...; }) | (IntrinsicAttributes & ... 2 more ... & { ...; })'.

131         css={styles}
            ~~~


Found 3 errors.

Answer 1

虽然我看不到Box的类型定义，但我的理解是：

<Image
  {...props}
  src={src}
  objectFit="cover"
  data-testid="avatar"
  styles={{
    width: `${width}px`,
    height: `${height}px`,
    "& > div": {
      overflow: "hidden",
      borderRadius: width,
      position: "relative",
    },
  }}
/>

如果Image像这样设置，那么您的类型def应该更类似于：

  styles: {
    width: string
    height: string
    "& > div": {
      overflow: "hidden"
      borderRadius?: number
      position: "relative"
    }
  }

否则，我将放松类型定义，以允许任何有效的css-in-js对象。实际上，您可以从React.CSSProperties访问有效的值类型，例如：

height: React.CSSProperties['height]