Help Needed: TypeScript Error When Styling a Custom H1 Component

[YuliyaMinsk]

Hello friends!

I'm having trouble with a TypeScript error when trying to style a custom H1 component in my React project.
Here’s what I’ve done so far.

"react-markdown": "^9.0.1"

I created a separate component with the following code:

import { FC, HTMLAttributes, ReactNode } from 'react';
import { ExtraProps } from 'react-markdown';

interface H1Props extends HTMLAttributes<HTMLHeadingElement>, ExtraProps {
  children?: ReactNode[];
  className?: string;
}

const H1: FC<H1Props> = ({ children, ...props }) => (
  <h1 className="text-3xl font-bold text-gray-900 mt-4 mb-2" {...props}>
    {children}
  </h1>
);

export { H1 };

I assigned it to the appropriate tag:

return (
    <div className="flex md:container mx-auto p-4">
      <div className="menu-container flex-none w-80 bg-primary-white p-6 rounded-xl">
        <MenuDoc onMenuItemClick={handleMenuItemClick} />
      </div>

      <div className="content-container w-full px-6">
        {selectedMenuItem && (
          <div className="text-xl font-bold pb-2">Selected Menu Item: {selectedMenuItem.name}</div>
        )}
        <ReactMarkdown
          remarkPlugins={[remarkGfm]}
          components={{
            h1: H1, // Error here :-)
            pre: CodeBlock,
          }}
          className={'bg-primary-white p-6 rounded-xl'}
        >
          {markdownContent}
        </ReactMarkdown>
      </div>
    </div>
  );
}

However, I’m receiving the following TypeScript error:

Type 'FC<H1Props>' is not assignable to type 'keyof IntrinsicElements | Component<ClassAttributes<HTMLHeadingElement> & HTMLAttributes<HTMLHeadingElement> & ExtraProps> | undefined'.
  Type 'FunctionComponent<H1Props>' is not assignable to type 'FunctionComponent<ClassAttributes<HTMLHeadingElement> & HTMLAttributes<HTMLHeadingElement> & ExtraProps>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type 'ClassAttributes<HTMLHeadingElement> & HTMLAttributes<HTMLHeadingElement> & ExtraProps' is not assignable to type 'H1Props'.
        Types of property 'children' are incompatible.
          Type 'ReactI18NextChildren | Iterable<ReactI18NextChildren>' is not assignable to type 'ReactNode[] | undefined'.
            Type 'null' is not assignable to type 'ReactNode[] | undefined'.ts(2322)

I'm unsure about the type definitions required here and why my current setup isn’t compatible. Any assistance or insight into what might be causing this issue would be greatly appreciated!

Thank you in advance for your help!

[wooorm]

Hi Yulia!

Might be easier to just type props the way we do in the tests. Such as: https://github.com/remarkjs/react-markdown/blob/78160f5a0877675c1c18417a220f9948de143720/test.jsx#L567C16-L567C56.

Looking at your TS error, ReactI18Next seems like something that might be new, or from some other project? Could be that something recently happened to the React types.

[YuliyaMinsk]

I tried to do it like this and it worked. Thank you!

<ReactMarkdown
          remarkPlugins={[remarkGfm]}
          components={{
            h1: (props) => {
              return <h1 className="text-3xl font-semibold mt-4 mb-4" {...props} />;
            },
            h2: (props) => {
              return <h2 className="text-2xl font-medium mt-4 mb-4" {...props} />;
            },
            pre: CodeBlock,
          }}
          className={'bg-primary-white p-6 rounded-xl'}
        >
          {markdownContent}
        </ReactMarkdown>