Docusaurus:在ChakraProvider中包装自定义根会破坏我的mdx页面

Question

我正在用Docusaurus构建一个站点，并希望在我的代码中使用一些Chakra-UI组件。Chakra-ui需要将任何应用的根包在ChakraProvider组件中(例如，在使用create-react-app: https://chakra-ui.com/guides/getting-started/cra-guide#2-provider-setup构建的应用中)。

因此，为了使Chakra-ui与Docusaurus一起工作，我遵循了Docusaurus的说明:https://docusaurus.io/docs/swizzling#wrapper-your-site-with-root，并在/src/theme/Root.js上创建了一个自定义根。然后我试着在ChakraProvider中包装应用程序，像这样:

import * as React from 'react';
import { ChakraProvider } from '@chakra-ui/react';

export default function Root({children}) {
return (
<ChakraProvider>
{children}
</ChakraProvider>
);
}

保存此代码，然后运行npx docusaurus start导致我的MDX页面不能正常工作的站点。具体来说，标题(例如# This is a Heading)并没有像我期望的那样被当作标题并转换为html。

我还应该说标题是唯一的MDX元素似乎在这里被打破!我页面上的所有其他元素都正确呈现。

帮助吗?

Answer 1

将resetCss={false}添加到ChakraProvider标签中应该可以解决这个问题。

<ChakraProvider resetCSS={false}>{children}</ChakraProvider>