Chakra UI Next Js - 颜色模式切换在移动设备上单击 2 次即可更改背景颜色答案

【问题标题】：Chakra UI Next Js - Color Mode Toggle takes 2 clicks on Mobile to change Background ColorChakra UI Next Js - 颜色模式切换在移动设备上单击 2 次即可更改背景颜色
【发布时间】：2022-04-03 06:26:09
【问题描述】：

我在尝试使用 Chakra UI 在 NextJs 项目上安装 ColorMode Toggle 以使明暗模式正常工作时遇到了一些奇怪的问题。

据我所知，我已经按照他们的文档实现了它，并且在桌面上它可以按预期工作。我正在尝试从 cookie 中提取信息以供 colorModeManager 处理 SSR。

我的问题是在移动设备上尝试切换时，主题中的所有内容都会正确切换，但第一次切换时的背景颜色除外。即，文本从黑色变为浅色，但背景从浅色变为浅色，从而形成一个同时具有浅色背景和文本的屏幕。当我第二次再次按下切换按钮时，背景现在从浅色变为深色，因为它应该有第一次点击，文本和其他组件再次切换，导致所有内容都被卡在相反的颜色模式中而被掩盖。

非常感谢任何关于为什么会发生这种情况以及如何调整以解决问题的见解。我无法在浏览器中的本地计算机上复制它，就在我部署到 vercel 时，它只是在移动设备上以这种方式损坏。

Chakra.jsx

import {
  ChakraProvider,
  cookieStorageManager,
  localStorageManager
} from '@chakra-ui/react';
import theme from '../../styles/theme';

export function Chakra({ cookies, children }) {

  const colorModeManager =
    typeof cookies === 'string'
      ? cookieStorageManager(cookies)
      : localStorageManager

  return (
    <ChakraProvider colorModeManager={colorModeManager} theme={theme}>
        {children}
    </ChakraProvider>
  )
}

// also export a reusable function getServerSideProps
export function getServerSideProps({ req }) {
  return {
    props: {
      // first time users will not have any cookies and you may not return
      // undefined here, hence ?? is necessary
      cookies: req.headers.cookie ?? '',
    },
  }
}

ToggleTheme.jsx

import { useColorMode, useColorModeValue, IconButton, Icon } from '@chakra-ui/react';
import { SunIcon, MoonIcon } from '@chakra-ui/icons';

export default function ToggleTheme() {
  const { colorMode, toggleColorMode } = useColorMode()

  return (
    <>
       <IconButton
          aria-label='Toggle Theme'
          icon={colorMode === 'light' ? <SunIcon /> : <MoonIcon />}
          onClick={toggleColorMode}/>
    </>
  )
}

_app.js

import * as React from 'react';
import '../styles/globals.scss';
import '../styles/content.scss';
import { motion, AnimatePresence } from 'framer-motion';
import { Chakra } from '../components/theme/Chakra'
import Layout from '../components/layout/Layout'


function MyApp({ Component, pageProps, router }) {

  return (
    <>
      <Chakra cookies={pageProps.cookies}>
        <Layout>
           <Component {...pageProps} />
        </Layout>
       </Chakra>

      </>
  );
}

export default MyApp;

 // re-export the reusable `getServerSideProps` function
export { getServerSideProps } from "../components/theme/Chakra";

主题.js

import { extendTheme } from '@chakra-ui/react';
import { mode } from '@chakra-ui/theme-tools';


const config = {
  initialColorMode: 'light',
  useSystemColorMode: false,
}
 
const overrides = {
  config
}

const theme = extendTheme(overrides)

export default theme

【问题讨论】：

标签： reactjs next.js server-side-rendering darkmode chakra-ui

【解决方案1】：

问题是从 _app.js 重新导出。您实际上需要从页面 (index.ts) 重新导出。 _app.js 不支持getServerSideProps

【讨论】：