文章/答案/技术大牛

发布

社区首页 >问答首页 >使用带有useMantineColorScheme的NextJS - ColorSchemeProvider的用户界面缺失

问使用带有useMantineColorScheme的NextJS - ColorSchemeProvider的用户界面缺失
EN

Stack Overflow用户

提问于 2022-10-06 09:41:00

回答 1查看 416关注 0票数 0

我有一个NextJS应用程序，我想要使用门庭作为UI库，但我遇到了一个问题的设置。

我基本上完全遵循了标准的设置指令，但是我得到了以下错误：

Error: useMantineColorScheme hook was called outside of context, make sure your app is wrapped with ColorSchemeProvider component

我希望呈现的组件如下所示(从这里获得)

我找错地方了吗？

我已经创建了一个运行中的副本，它以这里的方式失败。

我的代码：

_document.tsx

import { createGetInitialProps } from '@mantine/next'
import Document, { Head, Html, Main, NextScript } from 'next/document'

const getInitialProps = createGetInitialProps()

export default class _Document extends Document {
  static getInitialProps = getInitialProps

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

_app.tsx

import type { AppProps } from 'next/app'
import '../styles/vars.css'
import '../styles/global.css'
import './app.css'
import { NextQueryParamProvider } from 'next-query-params'
import { useEffect } from 'react'
import { MantineProvider } from '@mantine/core'

// This file allows us to inject elements that will be common to all pages.
// when we route to something, this will ultimately be passed to this component as "Component"
// And we can then alter things like styling, routing, etc.
function MyApp({ Component, pageProps }: AppProps) {
  
  return (
    <>
      <NextQueryParamProvider>
        <MantineProvider
          withGlobalStyles
          withNormalizeCSS
          theme={{
            /** Put your mantine theme override here */
            colorScheme: 'light',
          }}
        >
          <Component {...pageProps} />
        </MantineProvider>
      </NextQueryParamProvider>
    </>
  )
}

export default MyApp

colorComponent.tsx

import { useMantineColorScheme, ActionIcon, Group } from '@mantine/core';
import { IconSun, IconMoonStars } from '@tabler/icons';

export function ActionToggle() {
  const { colorScheme, toggleColorScheme } = useMantineColorScheme();

  return (
    <Group position="center" my="xl">
      <ActionIcon
        onClick={() => toggleColorScheme()}
        size="lg"
        sx={(theme) => ({
          backgroundColor:
            theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
          color: theme.colorScheme === 'dark' ? theme.colors.yellow[4] : theme.colors.blue[6],
        })}
      >
        {colorScheme === 'dark' ? <IconSun size={18} /> : <IconMoonStars size={18} />}
      </ActionIcon>
    </Group>
  );
}

reactjs

next.js

mantine

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-10-12 11:43:35

事实证明，ColourSchemeProvider实际上与MantineProvider是分开的，但是我并不知道这一点。可以通过向ColorSchemeProvider文件中添加一个_app.tsx来解决这个问题。

给出了一个这里的例子。

复制自示例：

import { GetServerSidePropsContext } from 'next';
import { useState } from 'react';
import { AppProps } from 'next/app';
import { getCookie, setCookie } from 'cookies-next';
import Head from 'next/head';
import { MantineProvider, ColorScheme, ColorSchemeProvider } from '@mantine/core';
import { NotificationsProvider } from '@mantine/notifications';

export default function App(props: AppProps & { colorScheme: ColorScheme }) {
  const { Component, pageProps } = props;
  const [colorScheme, setColorScheme] = useState<ColorScheme>(props.colorScheme);

  const toggleColorScheme = (value?: ColorScheme) => {
    const nextColorScheme = value || (colorScheme === 'dark' ? 'light' : 'dark');
    setColorScheme(nextColorScheme);
    setCookie('mantine-color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
  };

  return (
    <>
      <Head>
        <title>Mantine next example</title>
        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
        <link rel="shortcut icon" href="/favicon.svg" />
      </Head>

      <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
        <MantineProvider theme={{ colorScheme }} withGlobalStyles withNormalizeCSS>
          <NotificationsProvider>
            <Component {...pageProps} />
          </NotificationsProvider>
        </MantineProvider>
      </ColorSchemeProvider>
    </>
  );
}

App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => ({
  colorScheme: getCookie('mantine-color-scheme', ctx) || 'light',
});

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73971679

复制

相似问题

问使用带有useMantineColorScheme的NextJS - ColorSchemeProvider的用户界面缺失
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用带有useMantineColorScheme的NextJS - ColorSchemeProvider的用户界面缺失EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用带有useMantineColorScheme的NextJS - ColorSchemeProvider的用户界面缺失
EN