I have a fairly simple need to add and spread some css objects as I am using ChakraUI. So everything is inline pops. So I believe the main issue is "& > div"
However as you can see from one of the TS errors css is also being flagged but I cannot think of a good reason for this sadly.
Avatar/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 Errors
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.
