How to use custom components in remark-gfm

[confuseder]

I want to use components change remark-gfm syntax style like use standard markdown syntax.
like this :

const components = {
    h1: (props: any) => {
        return <h1 className='text-4xl font-black antialiased'>{props.children}</h1>
    }
}

export function CustomMDX(props: MDXRemoteProps) {
    return <MDXRemote {...props} options={{
        mdxOptions: {
            rehypePlugins: [rehypeKatex, rehypeHighlight],
            remarkPlugins: [remarkMath, remarkGfm]
        }
    }} />
}

[ChristianMurphy]

Welcome @confuseder! 👋
Could you expand a bit on your question?
What does "remark-gfm syntax style like use standard markdown syntax" mean to you?
Could you give an example of what input and output you want? And some explanation of why?

---

Taking an educated guess.
You have tailwind classnames in your example.
Tailwind resets plain element to not look like headings, lists, etc.
You can ask tailwind to make the styles more content like with the typography plugin and prose class added to the root level of where you render markdown. See remarkjs/react-markdown#505 (comment)