Mantine
-
|
Hey i used the provided next.js template on the website and yeah... |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 15 replies
-
|
Also what is the new replacement for "ElementGroup" is it "Group"? |
Beta Was this translation helpful? Give feedback.
-
|
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.
-
|
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.
-
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.
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)