无法在 NEXTJS 上显示降价

Question

哈啰，祝你有个愉快的一天！

我正在学习一些关于 React Markdown 的知识，我已经成功使用 React Markdown 编辑器，但是现在，当我想显示它时，我卡住了，我正在使用 react-markdown和 NEXTJS，问题是：

正在导入 library:

const ReactMarkdown = dynamic(
  () => import("react-markdown").then((mod) => mod.default),
  { ssr: false }
);
const rehypeRaw = dynamic(
  () => import("rehype-raw").then((mod) => mod.default),
  { ssr: false }
);
const remarkGfm = dynamic(
  () => import("remark-gfm").then((mod) => mod.default),
  { ssr: false }
);

我的降价是这样的：

const [value, setValue] = useState("# A demo of `react-markdown`");

这是我的 div

<div className="container mx-auto px-0 lg:px-40 pt-6 pb-8 sm:pt-14 sm:pb-16 md:pt-14 md:pb-16 min-h-screen">
        <ReactMarkdown
          children={value}
          remarkPlugins={[remarkGfm]}
        />
</div>

当我刷新我的页面时，我得到了这个：

那不是 H1，code tag 似乎不起作用，但是当我使用粗体时：

const [value, setValue] = useState("# A **demo** of `react-markdown`");

正在显示粗体..

此时，我不知道为什么会这样，有人可以帮助我吗？

Answer 1

您似乎在使用 TailwindCSS，元素的默认样式已重置，这就是 h1 文本看起来与其他任何文本一样的原因。

您可以使用 @tailwindcss/typography 来解决这个问题。

只需将插件添加到您的 tailwindcss.config.js 文件

// tailwindcss.config.js
module.exports = {
  plugins: [require('@tailwindcss/typography'), (...)],
  ...
}

并在 HTML 元素上使用 prose 类

<div className="prose ...">(...)</div>

此外，使用 Next.js 动态导入，您不必使用 then 语法来获取默认模块。

const ReactMarkdown = dynamic(() => import("react-markdown"), { ssr: false });

此代码段应为您提供与导入 default 模块相同的信息。仅当您要导入特定导出时才使用 then

无法在 NEXTJS 上显示降价

Can't display markdown on NEXTJS

markdown

reactjs

next.js

tailwind-css

react-markdown