由于CSSReset - Chakra-ui的原因，Markdown未正确显示

Question

我正在制作一个NextJs博客，我必须在一个动态页面中呈现我的markdown。我的应用程序中使用了CSSReset，因此，markdown不能正确显示。有人能帮我解决这个问题吗？

我的ThemeContainer

0 import React from "react";
    1 
    2 import {
    3   ThemeProvider as ChakraThemeProvider,
    4   ColorModeProvider,
    5   CSSReset,                                   
    6 } from "@chakra-ui/core";
    7                                                                                        
    8 import { ThemeProvider as EmotionThemeProvider } from "emotion-theming";
    9 import theme from "../styles/theme";
   10 
   11 export const ThemeContainer = ({ children }) => {
   12   return (
   13     <ChakraThemeProvider theme={theme}>
   14       <ColorModeProvider value={"light"}>
   15         <EmotionThemeProvider theme={theme}>
   16           <CSSReset />                                    
   17           {children}                                                                                      
   18         </EmotionThemeProvider>                                                                           
   19       </ColorModeProvider>                                                                                
   20     </ChakraThemeProvider>                                                                                
   21   );
   22 };

我的标记文件

10 const Post = (postData: Post) => {
+  11   const content = hydrate(postData.source);
+  12 
+  13   console.log(content);
_  14 
   15   return (
~  16     <Flex w="full" overflowY="hidden">
~  17       <div>{content}</div>
~  18     </Flex>
   19   );
   20 };
   21 
   22 export default Post;

我没有做样式，因为我想知道如何解决我遇到的这个问题，所以我只留下了一个呈现内容的小组件

我是否应该尝试派生此CSSReset并删除导致其发生的样式？？

Answer 1

不久前我也遇到过同样的问题。我不推荐在Markdown中使用ChakraUI，因为它需要重置所有的样式，这会导致这个问题，但是如果你有一个包含静态和动态(非Markdown )站点的混合应用，并且你只想在动态站点上使用ChakraUI的CSSReset，那么你可以修改你的_app，或者在这种情况下的ThemeContainer，如下所示，以防止CSSReset被应用到你的Markdown站点上：

假设您有x.com/slug这样的动态页面和x.com/blog/slug这样的静态页面

import { useRouter } from "next/router";

<ChakraThemeProvider theme={theme}>
  <ColorModeProvider value={"light"}>
    <EmotionThemeProvider theme={theme}>
       {!useRouter().asPath.includes("/blog/") ? <CSSReset /> : null}                                    
       {children}                                                                                      
    </EmotionThemeProvider>                                                                           
  </ColorModeProvider>                                                                                
 </ChakraThemeProvider>

这将阻止在静态页面上呈现博客组件(如果它们的路径包含/ CSSReset /)，但是ChakraUI仍然可以在任何其他路径上很好地工作。

但是，ChakraUI不是样式Markdown的好解决方案，因为它需要CSSReset才能正常工作。

这个解决方案对我有效(在_app.js文件中)。