由于CSSReset-Chakra ui，标记没有正确显示

Question

我正在做一个NextJs博客，我必须在一个动态页面中呈现我的标记。CSSReset正在我的应用程序中使用，因此，markdown没有正确显示。有人能帮我吗？？

我的主题联系人

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文件中(。

Answer 2

当我试图按照Next.js官方教程使用Chakara UI创建博客时，我也遇到了同样的问题。

我的问题是，remak.js从markdown文件中呈现HTML标记，但HTML标记没有样式，因为Chakra UI需要CSSReset。设置｛resetCSS＝｛false｝把我的网站搞砸了

我通过在theme.js.中的全局样式中添加HTML标记的默认CSS来解决这个问题

但这感觉像是一个愚蠢的解决方案，我正在寻找更好的解决方案以及

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" },
}),
};