fix: ssg error of style tag in ssg rendered html (#44)

Author: SoonIter

src/background-image/global.scss

@@ -0,0 +1,12 @@
+:root {
+  --rp-c-bg: #0b0c0e;
+}
+:root:not(.dark) {
+  --rp-c-bg: #fff;
+}
+.rspress-nav {
+  transition: background 0.4s;
+}
+body:not(.notTopArrived) .rspress-nav {
+  background: transparent !important;
+}

src/background-image/index.tsx

@@ -1,5 +1,6 @@
 import { type FC, useEffect, useState } from 'react';
 import styles from './index.module.scss';
+import './global.scss';
 
 const useTopArrived = () => {
   const [scrollY, setScrollY] = useState(0);
@@ -44,27 +45,10 @@ export const BackgroundImage: FC<BackgroundProps> = ({
   }, [topArrived, navBarTopArrived]);
 
   return (
-    <>
-      <style>
-        {`:root {
-              --rp-c-bg: #0b0c0e;
-          }
-          :root:not(.dark) {
-              --rp-c-bg: #fff;
-          }
-          .rspress-nav {
-            transition: background 0.4s;
-          }
-          body:not(.notTopArrived) .rspress-nav {
-            background: transparent !important;
-          }
-          `}
-      </style>
-      <img
-        className={styles.background}
-        src="https://assets.rspack.rs/rspack/assets/landingpage-background-compressed.png"
-        alt="background"
-      />
-    </>
+    <img
+      className={styles.background}
+      src="https://assets.rspack.rs/rspack/assets/landingpage-background-compressed.png"
+      alt="background"
+    />
   );
 };