Github style table is not rendered correctly while using remark-gfm

[detectiveHLH]

Initial checklist

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

Affected packages and versions

react-markdown: "^8.0.5" remark-gfm: "^3.0.1"

Link to runnable example

No response

Steps to reproduce

I'm using react-gfm to render Table, I using the same markdown text in official demo, but it's not working like it.

It should be:

My code is like this:

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
.....
<ReactMarkdown
  remarkPlugins={[remarkGfm, remarkRehype]}
>
  {mdSourceText}
</ReactMarkdown>

Expected behavior

Tables are rendered in Github style

Actual behavior

Actual like this:

I also using a sanbox to test it, but I got the same problem:sanbox link

Runtime

Node v17

Package manager

npm 8

OS

macOS

Build and bundle tools

Webpack

[wooorm]

Use CSS. You don‘t have CSS.

Duplicate of #631

[github-actions]

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

[github-actions]

Hi team! It seems this post is a duplicate, but hasn’t been marked as such. Please post a comment w/ Duplicate of #123(no final .) to do so. See GH docs for more info.

Thanks,
— bb

[wooorm]

Duplicate of #631