fix: css hydration error (#1397)

apps/web/next.config.mjs

@@ -85,7 +85,6 @@ const nextConfig = {
       loader: 'raw-loader',
     });
     config.resolve.alias['yjs'] = require.resolve('yjs');
-    config.resolve.alias['@mui/styled-engine'] = '@mui/styled-engine-sc';
 
     if (!isServer && !dev) {
       config.devtool = 'hidden-nosources-source-map';

apps/web/package.json

@@ -24,7 +24,6 @@
     "@emotion/server": "^11.10.0",
     "@emotion/styled": "^11.10.6",
     "@mui/material": "^5.11.11",
-    "@mui/styled-engine-sc": "^5.11.11",
     "cmdk": "^0.1.22",
     "css-spring": "^4.1.0",
     "dayjs": "^1.11.7",
@@ -36,7 +35,6 @@
     "react-dom": "^18.2.0",
     "react-helmet-async": "^1.3.0",
     "react-is": "^18.2.0",
-    "styled-components": "^5.3.8",
     "swr": "^2.0.4",
     "y-indexeddb": "^9.0.9",
     "y-protocols": "^1.0.5",

apps/web/src/providers/ThemeProvider.tsx

@@ -10,7 +10,7 @@ import { ThemeProvider as NextThemeProvider, useTheme } from 'next-themes';
 import type { PropsWithChildren } from 'react';
 import React, { memo, useEffect, useMemo, useState } from 'react';
 
-import { useCurrentPageId } from '../hooks/current/use-current-page-id';
+import { useCurrentPage } from '../hooks/current/use-current-page-id';
 import { useCurrentWorkspace } from '../hooks/current/use-current-workspace';
 import { usePageMeta } from '../hooks/use-page-meta';
 
@@ -20,7 +20,7 @@ const ThemeInjector = React.memo<{
   return (
     <GlobalStyles
       styles={{
-        ':root': globalThemeVariables(themeStyle) as any,
+        '#__next': globalThemeVariables(themeStyle) as any,
       }}
     />
   );
@@ -30,10 +30,10 @@ const ThemeProviderInner = memo<React.PropsWithChildren>(
   function ThemeProviderInner({ children }) {
     const { theme } = useTheme();
     const [currentWorkspace] = useCurrentWorkspace();
-    const [currentPage] = useCurrentPageId();
+    const currentPage = useCurrentPage();
     const pageMeta = usePageMeta(currentWorkspace?.blockSuiteWorkspace ?? null);
     const editorMode =
-      pageMeta.find(page => page.id === currentPage)?.mode ?? 'page';
+      pageMeta.find(page => page.id === currentPage?.id)?.mode ?? 'page';
     const themeStyle = useMemo(() => getLightTheme(editorMode), [editorMode]);
     const darkThemeStyle = useMemo(
       () => getDarkTheme(editorMode),

apps/web/src/utils/create-emotion-cache.ts

@@ -13,5 +13,5 @@ export default function createEmotionCache() {
     insertionPoint = emotionInsertionPoint ?? undefined;
   }
 
-  return createCache({ key: 'affine-style', insertionPoint });
+  return createCache({ key: 'affine', insertionPoint });
 }