0

私は NextJs ブログを作成しており、動的ページでマークダウンをレンダリングする必要があります。アプリで 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 をフォークして、それを実現しているスタイルを削除する必要がありますか??

4

1 に答える 1