ModalOverlayProps typescript error

🐛 Bug report

ModalOverlayProps interface throws an error with Typescript 4.1.3

TS2320: Interface 'ModalOverlayProps' cannot simultaneously extend types 'Pick<HTMLMotionProps<"div">, "slot" | "style" | "title" | "animate" | "children" | "inherit" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 286 more ... | "onViewportBoxUpdate">' and 'Pick<ChakraProps, "p" | "filter" | "color" | "css" | "m" | "margin" | "mt" | "marginBlockStart" | "marginTop" | "mr" | "marginInlineEnd" | "marginEnd" | "me" | "marginRight" | ... 306 more ... | "sx">'.
  Named property 'css' of types 'Pick<HTMLMotionProps<"div">, "slot" | "style" | "title" | "animate" | "children" | "inherit" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 286 more ... | "onViewportBoxUpdate">' and 'Pick<ChakraProps, "p" | "filter" | "color" | "css" | "m" | "margin" | "mt" | "marginBlockStart" | "marginTop" | "mr" | "marginInlineEnd" | "marginEnd" | "me" | "marginRight" | ... 306 more ... | "sx">' are not identical.

🧭 Possible Solution

Adding css in the Omit arguments solves the issue for me, but I’m not sure if it’s the appropriate way to solve this problem or if it has unintended side-effects.

export interface ModalOverlayProps extends Omit<HTMLMotionProps<"div">, "color" | "css">, Omit<ChakraProps, "transition"> {
    children?: React.ReactNode;
}

🌍 System information

Software	Version(s)
Chakra UI	1.1.1
Typescript	4.1.3

[christopherjbaker]

This is not resolved for the latest of @chakra-ui/modal@1.9.2 and framer-motion@4.1.17, but you only see it if you have "skipLibCheck": false in your tsconfig. I have temporarily skipped that check, but that’s not a good long-term fix. As noted above, just adding | "css" to the omit list resolves the error, but I’d want a maintainer to make sure that is the correct way to solve this (as opposed to changing the other source of CSS to be compatible instead).

Note: the specific error has changed from the OP:

node_modules/@chakra-ui/modal/dist/types/modal.d.ts:120:18 - error TS2320: Interface 'ModalOverlayProps' cannot simultaneously extend types 'Omit<HTMLMotionProps<"div">, "color" | "transition">' and 'ChakraProps'.
  Named property 'css' of types 'Omit<HTMLMotionProps<"div">, "color" | "transition">' and 'ChakraProps' are not identical.

120 export interface ModalOverlayProps extends Omit<HTMLMotionProps<"div">, "color" | "transition">, ChakraProps {
                     ~~~~~~~~~~~~~~~~~

[with-heart]

Oh, it’s not possible to provide a CodeSandbox because latest typescript version a CSB can use in the workspace is 4.1.2 🙃