Markdown is not being displayed correctly due to CSSReset - Chakra-ui

Question

I'm making a NextJs Blog, and I have to render my markdown in a dynamic page. CSSReset is being used in my app, and as a consequence, markdown is not being displayed correctly. Can someone help me out on this??

my 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 };

My markdown file

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;

I haven't done styling because I want to know how to solve this problem I'm having, so I left just a small component rendering the content

Should I try to fork this CSSReset and remove the styles that are making it happen??

Answer 1

I had the same issue a while ago. I wouldn't recommend using ChakraUI for Markdown because it needs to reset all CSS styles which results in this issue, but If you have a hybrid app with both static and dynamic (non-markdown) sites and you only want to use ChakraUI with its CSSReset on your dynamic sites, then you can modify your _app, or ThemeContainer in this case, as following to prevent the CSSReset from being applied to your Markdown sites:

Let's say you have dynamic pages like x.com/[slug] and static pages like 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>

This will prevent the CSSReset Component from being rendered on your static pages (if their path includes /blog/) but ChakraUI will still work fine on any other paths.

But again, ChakraUI isn't a good solution to style Markdown since it requires CSSReset to work properly.

This solution worked for me (inside the _app.js file).

Answer 2

I have the same problem when I try to follow the Next.js official tutorial to create a blog using Chakara UI.

My problem is that remark.js renders HTML tags from a markdown file but HTML tags have no styling because Chakra UI requires CSSReset. And setting {resetCSS={false} messed up my website

I solved the problem by adding the default CSS of HTML tags to the global styles in theme.js.

But this feels like a dumb solution and I'm looking for better solutions as well

 const styles = {
  global: (props) => ({
    body: {
      bg: mode("#f0e7db", "#111111")(props),
    },
    p: {
      display: "block",
      marginBlockStart: "1em",
      marginBlockEnd: "1em",
      marginInlineStart: "0px",
      marginInlineEnd: "0px",
      lineHeight: "200%",
    },
    li: {
      display: "list-item",
      textAlign: "-webkit-match-parent",
    },
    ul: {
      paddingInlineStart: "20px",
    },
    ol: {
      display: "block",
      listStyleType: "decimal",
      marginBlockStart: "1em",
      marginBlockEnd: "1em",
      marginInlineStart: "0px",
      marginInlineEnd: "0px",
      paddingInlineStart: "40px",
    },
    h1: {
      display: "block",
      fontSize: "2em",
      marginBlockStart: "0.67em",
      marginBlockEnd: "0.67em",
      marginInlineStart: "0px",
      marginInlineEnd: "0px",
      fontWeight: "bold",
    },
    h2: {
      display: "block",
      fontSize: "1.5em",
      marginBlockStart: "0.83em",
      marginBlockEnd: "0.83em",
      marginInlineStart: "0px",
      marginInlineEnd: "0px",
      fontWeight: "bold",
    },
    h3: {
      display: "block",
      fontSize: "1.17em",
      marginBlockStart: "1em",
      marginBlockEnd: "1em",
      marginInlineStart: "0px",
      marginInlineEnd: "0px",
      fontWeight: "bold",
    },
    h4: {
      display: "block",
      fontSize: "1em",
      marginBlockStart: "1.33em",
      marginBlockEnd: "1.33em",
      marginInlineStart: "0px",
      marginInlineEnd: "0px",
      fontWeight: "bold",
    },
    h5: {
      display: "block",
      fontSize: "0.83em",
      marginBlockStart: "1.67em",
      marginBlockEnd: "1.67em",
      marginInlineStart: "0px",
      marginInlineEnd: "0px",
      fontWeight: "bold",
    },
    a: {
      color: "#58a6ff",
    },
    pre: {
      display: "block",
      fontFamily: "monospace",
      whiteSpace: "pre",
      margin: "1em 0",
    },
    strong: {
      fontWeight: "bold",
    },
    em: { fontStyle: "italic" },

    blockquote: {
      display: "block",
      marginBlockStart: "1em",
      marginBlockEnd: "1em",
      marginInlineStart: "40px",
      marginInlineEnd: "40px",

      borderLeft: "5px solid #ccc",
      margin: "1.5em 10px",
      padding: "0.5em 10px 0.5em 10px",
    },
    code: { fontFamily: "monospace" },
  }),
};