无法在NEXTJS上显示标记

Question

哈洛，祝你今天过得愉快！

我正在学习一些关于react的标记，我已经成功地使用了react编辑器，但是现在，当我想显示它时，我被卡住了，我使用的是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