@arcblock/ux 2.4.2 → 2.4.5

package/src/withTheme/index.js

@@ -1,74 +1,61 @@
-import * as React from 'react';
-import { Global, ThemeProvider, css } from '@emotion/react';
-import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import { useEffect } from 'react';
+import { Global, css } from '@emotion/react';
 import CssBaseline from '@mui/material/CssBaseline';
 
-import { create } from '../Theme';
+import { createTheme, ThemeProvider } from '../Theme';
 
-const globalStyles = css`
-  font-family: ${(props) => props.theme.typography.fontFamily};
-  color: ${(props) => props.theme.typography.color.main};
+function withTheme(Component, { mode = 'light', pageWidth = 'md', palette, typography } = {}) {
+  const theme = createTheme({ mode, pageWidth, palette, typography });
 
-  a,
-  a:hover,
-  a:active {
-    text-decoration: none;
-    color: ${(props) => props.theme.palette.primary.dark};
-  }
+  const globalStyles = css`
+    font-family: ${theme.typography.fontFamily};
+    color: ${theme.typography.color.main};
 
-  a:hover {
-    color: ${(props) => props.theme.palette.primary.main};
-  }
+    a,
+    a:hover,
+    a:active {
+      text-decoration: none;
+      color: ${theme.palette.primary.dark};
+    }
 
-  .section--latest-post {
-    p:last-of-type {
-      margin: 0;
+    a:hover {
+      color: ${theme.palette.primary.main};
     }
-  }
 
-  .has-scrolled {
-    .section--footnotes {
-      position: static !important;
-      transition-property: background-color;
-      transition-duration: 600ms;
-      transition-timing-function: ease;
-      .footnote__title {
-        color: #fff;
+    .section--latest-post {
+      p:last-of-type {
+        margin: 0;
       }
     }
-  }
-`;
 
-function withTheme(Component, { mode = 'light', pageWidth = 'md', palette, typography } = {}) {
-  class WithTheme extends React.Component {
-    constructor(props) {
-      super(props);
-
-      this.theme = create({ mode, pageWidth, palette, typography });
+    .has-scrolled {
+      .section--footnotes {
+        position: static !important;
+        transition-property: background-color;
+        transition-duration: 600ms;
+        transition-timing-function: ease;
+        .footnote__title {
+          color: #fff;
+        }
+      }
     }
+  `;
 
-    componentDidMount() {
-      // Remove the server-side injected CSS.
+  return function WithTheme(props) {
+    useEffect(() => {
       const jssStyles = document.querySelector('#jss-server-side');
       if (jssStyles && jssStyles.parentNode) {
         jssStyles.parentNode.removeChild(jssStyles);
       }
-    }
-
-    render() {
-      return (
-        <MuiThemeProvider theme={this.theme}>
-          <CssBaseline />
-          <Global styles={globalStyles} />
-          <ThemeProvider theme={this.theme}>
-            <Component {...this.props} />
-          </ThemeProvider>
-        </MuiThemeProvider>
-      );
-    }
-  }
-
-  return WithTheme;
+    }, []);
+    return (
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <Global styles={globalStyles} />
+        <Component {...props} />
+      </ThemeProvider>
+    );
+  };
 }
 
 export default withTheme;