fix: 404page FOUC

shuvijs · May 20, 2020 · a7bd021 · a7bd021
1 parent 4c73355
commit a7bd021
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 42 deletions.
diff --git a/packages/runtime-react/package.json b/packages/runtime-react/package.json
@@ -14,7 +14,6 @@
   "files": [
     "lib",
     "es",
-    "style",
     "client-env.d.ts",
     "index.d.ts",
     "index.js",

diff --git a/packages/runtime-react/src/page404.tsx b/packages/runtime-react/src/page404.tsx
@@ -1,18 +1,40 @@
-import React from "react";
+import React from 'react';
 // @ts-ignore
-import { Head } from "@shuvi/app";
-import style from "../style/page404.css";
+import { Head } from '@shuvi/app';
+
+const style = {
+  container: {
+    color: '#000',
+    background: '#fff',
+    fontFamily:
+      '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
+    height: '100vh',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  error: { display: 'flex', alignItems: 'center', justifyContent: 'center' },
+  errorCode: {
+    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+    paddingRight: '20px',
+    marginRight: '20px',
+    fontSize: '24px',
+    fontWeight: 500
+  },
+  errorDesc: { fontSize: '16px', lineHeight: '1' }
+} as const;
 
 export default function Page404() {
   return (
-    <div className={style.container}>
+    <div style={style.container}>
       <Head>
         <title>404: Page not found</title>
       </Head>
 
-      <div className={style.error}>
-        <div className={style.errorCode}>404</div>
-        <div className={style.errorDesc}>This page could not be found.</div>
+      <div style={style.error}>
+        <div style={style.errorCode}>404</div>
+        <div style={style.errorDesc}>This page could not be found.</div>
       </div>
     </div>
   );

diff --git a/packages/runtime-react/style/page404.css b/packages/runtime-react/style/page404.css