Mantine
-
|
Hey i used the provided next.js template on the website and yeah... |
Beta Was this translation helpful? Give feedback.
Answered by
rtivital
Jul 6, 2021
Replies: 3 comments 15 replies
-
|
Also what is the new replacement for "ElementGroup" is it "Group"? |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
Yes, it should be a drop in replacement |
Beta Was this translation helpful? Give feedback.
-
|
code: import {useEffect, useState} from "react";
import Head from "next/head";
import {
ActionIcon,
Badge,
Burger,
Drawer,
MantineProvider,
Group,
Divider,
NormalizeCSS,
GlobalStyles
} from "@mantine/core";
import React from "react";
import "../styles/index.css"
import "bootstrap/dist/css/bootstrap.min.css";
import { ApolloProvider } from '@apollo/react-hooks';
import { createGenerateId } from "jss";
// import "typeface-ubuntu-mono/index.css";
import { MoonIcon, SunIcon } from "@modulz/radix-icons";
import { useLocalStorageValue } from '@mantine/hooks';
import { NotificationsProvider } from '@mantine/notifications';
import Link from 'next/link'
import withApollo from "../utils/withApollo";
import NavbarDocsCategory from "../components/NavbarDocsCategory/NavbarDocsCategory";
import {JssProvider} from "react-jss";
const themes: "dark" | "light" = "dark";
const NavBar =
[
{
uncategorized: [
{
name: 'Prefix',
link: "docs/prefix"
}
],
groups: [],
group: "COMMANDS"
},
{
uncategorized: [
{
name: 'Your Mom',
link: "your/mom"
}
],
groups: [],
group: "GET YOUR CARS EXTENDED WARRANTY TODAY!"
}
]
function App(this: any, props: { Component: any; pageProps: any; apollo: any}) {
const { Component, pageProps, apollo } = props;
const [opened, setOpened] = useState(false);
const [colorScheme, setColorScheme] = useLocalStorageValue({key: "theme", defaultValue: themes});
const randomTitle = ["PNE\\N\\TIX",
"PHE\\N/TIX",
"PHE/N/TIX"].find((_, i, ar) => Math.random() < 1 / (ar.length - i));
useEffect(() => {
const jssStyles = document.getElementById("mantine-ssr-styles");
if (jssStyles) {
jssStyles?.parentElement?.removeChild(jssStyles);
}
}, []);
return (
<>
<JssProvider generateId={createGenerateId({ minify: true })}>
<Head>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title key={"title"}>
{randomTitle}
</title>
</Head>
<div className={colorScheme}>
<ApolloProvider client={apollo}>
<MantineProvider theme={{ colorScheme, primaryColor: "violet", colors: {discord: ["#5865F2", "#5865F2", "#5865F2", "#5865F2", "#5865F2", "#5865F2", "#5865F2", "#5865F2", "#5865F2", "#5865F2"]}}}>
<div style={{position: 'relative', zIndex: 1001}}>
<Group position="left" style={{
position: "absolute",
top: 0,
left: 0
}}>
<Burger
size={"lg"}
opened={opened}
onClick={() => {
setOpened((state: Boolean) => !state);
}}
title={opened ? "CLOSE" : "OPEN"}
aria-label={opened ? "CLOSE" : "OPEN"}
/>
</Group>
</div>
<Drawer
opened={opened}
onClose={() => setOpened(false)}
padding="xs"
noCloseOnClickOutside
>
<ActionIcon
variant="outline"
color={colorScheme === "dark" ? 'yellow' : 'blue'}
onClick={() => setColorScheme((current: string) => (current === 'dark' ? 'light' : 'dark'))}
title="Toggle color scheme"
style={{
position:"absolute",
top:".75%",
right:"2%"
}}
>
{colorScheme === "dark" ? (
<SunIcon style={{ width: 18, height: 18 }} />
) : (
<MoonIcon style={{ width: 18, height: 18 }} />
)}
</ActionIcon>
<br />
<br />
<Divider label="NAVIGATE" labelPosition="center"/>
<br />
<Group spacing="md" direction="column">
{
NavBar.map((value) => (
<>
<NavbarDocsCategory group={value} key={value.group} />
</>
))
}
<Link href="/">
<Badge color="violet" radius="xl">Homepage</Badge>
</Link>
<Link href="/commands">
<Badge color="indigo" radius="xl">Commands</Badge>
</Link>
<Link href="/serverselect">
<Badge color="cyan" radius="xl">Dashboard</Badge>
</Link>
<Link href="">
<Badge color="blue" radius="xl">Invite Bot</Badge>
</Link>
</Group>
</Drawer>
<NotificationsProvider>
{/*<NormalizeCSS />*/}
{/*<GlobalStyles />*/}
<Component {...pageProps} colorScheme={colorScheme} setColorScheme={setColorScheme} darkMode={colorScheme === "dark"} />
</NotificationsProvider>
</MantineProvider>
</ApolloProvider>
</div>
</JssProvider>
</>
);
}
export default withApollo(App);_document.tsx: import Document, {DocumentContext, Head, Html, Main, NextScript} from "next/document";
import React from "react";
import { SheetsRegistry, JssProvider, createGenerateId } from "react-jss";
export default class _Document extends Document {
static async getInitialProps(ctx: DocumentContext) {
const registry = new SheetsRegistry();
const generateId = createGenerateId({minify: true});
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App: JSX.IntrinsicAttributes) => (props: JSX.IntrinsicAttributes) =>
(
<JssProvider registry={registry} generateId={generateId}>
{/*@ts-ignore*/}
<App {...props} />
</JssProvider>
),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
<style id="mantine-ssr-styles">{registry.toString()}</style>
</>
),
};
}
render() {
return (
<Html lang="en">
{/*@ts-ignore*/}
<Head>
<meta
key="description"
name="description"
content={""}
/>
<meta
key="og:type"
name="og:type"
content={""}
/>
<meta
key="og:title"
name="og:title"
content={""}
/>
<meta
key="og:description"
name="og:description"
content={""}
/>
<meta
key="og:image"
name="og:image"
content={""}
/>
</Head>
<body style={{backgroundColor: "#01010A", color: "#F8F9FA"}}>
<Main />
<NextScript />
</body>
</Html>
);
}
} |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
I've seen something like this before, most likely there are styles mismatch from server and client, try out to unwrap your _app.tsx from JssProvider – https://github.com/mantinedev/mantine-next-template/blob/master/pages/_app.tsx#L21 (remove this line) |
Beta Was this translation helpful? Give feedback.
14 replies
-
Divider and Group old: static async getInitialProps(ctx: DocumentContext) {
const registry = new SheetsRegistry();
const generateId = createGenerateId();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () =>
originalRenderPage({
// @ts-ignore
enhanceApp: (App) => (props) => (
<JssProvider registry={registry} generateId={generateId}>
<App {...props} />
</JssProvider>
),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
<style id="mantine-ssr-styles">{registry.toString()}</style>
</>
),
};
} static async getInitialProps(ctx: DocumentContext) {
const registry = new SheetsRegistry();
const generateId = createGenerateId();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App: React.ReactPropTypes) => (props: JSX.IntrinsicAttributes) => (
<JssProvider registry={registry} generateId={generateId}>
<App {...props} />
</JssProvider>
),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
<style id="mantine-ssr-styles">{registry.toString()}</style>
</>
),
};
} |
Beta Was this translation helpful? Give feedback.
-
|
Weird... now the old one also doesn't throw an error |
Beta Was this translation helpful? Give feedback.
-
|
but anyway thanks @rtivital mantine might be the best author support I had on github xd |
Beta Was this translation helpful? Give feedback.
-
|
if you need the buggy code its here: |
Beta Was this translation helpful? Give feedback.
-
|
thanks, I guess it was an issue with JssProvider then |
Beta Was this translation helpful? Give feedback.
Answer selected by
Xapu1337
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I've seen something like this before, most likely there are styles mismatch from server and client, try out to unwrap your _app.tsx from JssProvider – https://github.com/mantinedev/mantine-next-template/blob/master/pages/_app.tsx#L21 (remove this line)