Styling changes and add multiple popovers

pages/_document.tsx

@@ -1,8 +1,22 @@
-import Document from 'next/document';
-import { createGetInitialProps } from '@mantine/next';
+import Document, { DocumentContext } from 'next/document';
+import { ServerStyles, createStylesServer } from '@mantine/next';
 
-const getInitialProps = createGetInitialProps();
+const stylesServer = createStylesServer();
 
 export default class _Document extends Document {
-  static getInitialProps = getInitialProps;
+  static async getInitialProps(ctx: DocumentContext) {
+    const initialProps = await Document.getInitialProps(ctx);
+
+    // Add your app specific logic here
+
+    return {
+      ...initialProps,
+      styles: (
+        <>
+          {initialProps.styles}
+          <ServerStyles html={initialProps.html} server={stylesServer} />
+        </>
+      ),
+    };
+  }
 }