Props type for overriden components

[kwiat1990]

Hi, I'm wondering if there's some typing I could use when overriding HTML elements like this:

const components = {
  img: ({
    src,
    ...attrs
    }: React.DetailedHTMLProps<
      React.ImgHTMLAttributes<HTMLImageElement>,
      HTMLImageElement
    >) => {
      return (
        <Image
          dprVariants={[2, 3]}
          placeholder="blur"
          responsive={[
	  {
            size: {
              width: 400,
            }
            maxWidth: 500,
	  }
        ]}
        src={src}
        {...attrs}
    />
  );
}}

export function MDXComponent({ component }: Props) {
  const Component = React.useMemo(
    () => getMDXComponent(component),
    [component],
  );
  return <Component components={components} />;
}

With the types it doesn't work because Image component have placeholder prop, which make Typescript complains about: Type 'string' is not assignable to type '"blur" | "empty" | undefined'.ts(2322) types.d.ts(16, 5): The expected type comes from property 'placeholder' which is declared here on type 'IntrinsicAttributes & ImageProps'. Similar problem comes up when using<div> inside an <li> element and so one. Is there some way to make Typescript happy?

[punkpeye]

@kwiat1990 Have you figured it out?

[kwiat1990]

@kwiat1990 Have you figured it out?

@punkpeye, it was so long ago that I don’t remember anymore. Sadly I don’t have this project on my GitHub, so I can’t look it up.

[punkpeye]

No worries. Thanks