2

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

我正在学习一些关于反应降价的东西，我已经成功使用反应降价编辑器，但是现在，当我想显示它时，我被卡住了，我正在使用react-markdownand 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`");

粗体正在显示..

请再看一遍。。

在这一点上，我知道为什么会这样，有人可以帮助我吗？

4

1 回答 1

3

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

你可以@tailwindcss/typography用来对付这个。

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

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

并使用proseHTML 元素上的类

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

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

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

此代码段应该为您提供与导入default模块相同的功能。仅then在您要导入特定导出时使用

于 2021-09-21T07:36:10.993 回答