无法在 NEXTJS 上显示降价

Question

Haloo，希望你有一个美好的一天！

我正在学习一些关于 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 });

这个 sn-p 应该与导入 default 模块相同。仅当您要导入特定导出时才使用 then