Typescript error while using syntax hightlight part code from README.md

[18601673727]

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

latest

Link to runnable example

No response

Steps to reproduce

I'm using like this,

<Markdown
  remarkPlugins={[remarkBreaks, remarkGfm]}
  components={{
    code({ children, className, node, ...rest }) {
      const match = /language-(\w+)/.exec(className || "");
      return match ? (
        <SyntaxHighlighter
          {...rest}
          PreTag="div"
          children={String(children).replace(/\n$/, "")}
          language={match[1]}
          style={theme === DEFAULT_THEME ? twilight : xonokai}
        />
      ) : (
        <code {...rest} className={className}>
          {children}
        </code>
      );
    },
  }}
>
  {input}
</Markdown>

It will cause VSCode to complain about types error,

No overload matches this call.
  Overload 1 of 2, '(props: SyntaxHighlighterProps): SyntaxHighlighter', gave the following error.
    Type '{ PreTag: "div"; children: string; language: string; style: { [key: string]: CSSProperties; }; ref?: LegacyRef<HTMLElement> | undefined; key?: Key | null | undefined; ... 267 more ...; onTransitionStartCapture?: TransitionEventHandler<...> | undefined; }' is not assignable to type 'IntrinsicClassAttributes<SyntaxHighlighter>'.
      Types of property 'ref' are incompatible.

then I made following change:

-  code({ children, className, node, ...rest }) {
+  code({ children, className, node, ref, ...rest }) { 

Problem solved, so maybe it was kinda useful to note this here. and feel free to close anytime.

Expected behavior

Everything works

Actual behavior

No overload matches this call.
  Overload 1 of 2, '(props: SyntaxHighlighterProps): SyntaxHighlighter', gave the following error.
    Type '{ PreTag: "div"; children: string; language: string; style: { [key: string]: CSSProperties; }; ref?: LegacyRef<HTMLElement> | undefined; key?: Key | null | undefined; ... 267 more ...; onTransitionStartCapture?: TransitionEventHandler<...> | undefined; }' is not assignable to type 'IntrinsicClassAttributes<SyntaxHighlighter>'.
      Types of property 'ref' are incompatible.

Runtime

No response

Package manager

No response

OS

No response

Build and bundle tools

No response

[github-actions[bot]]

Hi! Thanks for taking the time to contribute!

Because we treat issues as our backlog, we close duplicates to focus our work and not have to touch the same chunk of code for the same reason multiple times. This is also why we may mark something as duplicate that isn’t an exact duplicate but is closely related.

Thanks, — bb

[ChristianMurphy]

Duplicate of #666

[github-actions[bot]]

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.

[ChristianMurphy]

See the answer in https://github.com/remarkjs/react-markdown/issues/666#issuecomment-1001215783