fix: 修复dark模式刷新页面后，Code代码阴影问题 (#226)

Co-authored-by: 橙林 <chenglin@dian.so>
Mereithhh · Mar 6, 2023 · b4774e5 · b4774e5
1 parent 1a250cc
commit b4774e5
Showing 1 changed file with 9 additions and 4 deletions.
diff --git a/packages/website/components/Markdown/Code.tsx b/packages/website/components/Markdown/Code.tsx
@@ -10,9 +10,13 @@ import { ThemeContext } from "../../utils/themeContext";
 export function CodeBlock(props: { children: any; match: any }) {
   const code = props.children.replace(/\n$/, "");
   const { theme } = useContext(ThemeContext);
-  const codeStyle = useMemo(() => {
-    if (theme.includes("dark")) { return dark }
-    return light as any
+
+  const curModeInfo = useMemo(() => {
+    const mode = theme.includes('dark') ? dark : light
+    return {
+      mode,
+      key: Date.now()
+    }
   }, [theme])
 
   return (
@@ -54,7 +58,8 @@ export function CodeBlock(props: { children: any; match: any }) {
         </div>
 
         <SyntaxHighlighter
-          style={codeStyle}
+          key={curModeInfo.key}
+          style={curModeInfo.mode}
           language={props.match?.length ? props.match[1] : undefined}
           wrapLines={true}
           lineProps={() => {