由于 CSSReset - Chakra-ui，Markdown 无法正确显示

Question

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

我的主题容器

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

不久前我遇到了同样的问题。我不建议将 ChakraUI 用于 Markdown，因为它需要重置所有导致此问题的 CSS 样式，但如果您有一个包含静态和动态（非 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 组件在您的静态页面上呈现（如果它们的路径包括 /blog/），但 ChakraUI 仍然可以在任何其他路径上正常工作。

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

这个解决方案对我有用（在 _app.js 文件中）。