Div 在生产中不在正确的位置（使用脉轮 Ui）

Question

这真的很奇怪所以我有这个代码：

layout.js

 return (
    <>
      <Box
        bgGradient={
          colorMode !== "dark" ? "radial(bgOrange.100,  bgOrange.500 );" : ""
        }
        position="absolute"
        w="100%"
        zIndex="-2"
      >
        <Header
          showHeader={showHeader}
          style={{
            width: "100%",
            zIndex: "2",
            position: "fixed",
          }}
          siteTitle={data.site.siteMetadata?.title || `Title`}
        />
        <Box
          style={{
            margin: `0 auto`,
            padding: `inherit 2.0875rem 1.45rem`,
          }}
        pt={{base: '15vh', md: '20vh', lg:'10vh'}}
        >
          <main>
            <Flex
              zIndex="-1"
              position="fixed"
              w="100%"
              justify="flex-end"
              alignItems="end"
            >
              <CodingGuy className={codingGuyClass} />
            </Flex>
            {children}
            <Footer/>
          </main>
        </Box>
      </Box>

index.js

const IndexPage = () => (
  <>
    <SEO/>
    <Home/>
    <Contact />
  </>
)

home.js

const Home = () => {

  const big = useBreakpointValue({ base: false, md: true })
  return (
    <Section id="home" color="white">
      <Flex>
        <Flex direction="column" flex="1" align="center">
          <Logo big={big} />
          <Center fontSize="smaller">{catchPhrase}</Center>
          <Flex justify="center">
            <CoolButton href='#contact' bg="greenblue">Contacter</CoolButton>
            {/* <CoolButton href='#services' bg="primary">Services</CoolButton> */}
            <CoolButton href='#competences' bg="primary">Compétences</CoolButton>
          </Flex>
        </Flex>
        <Spacer />
      </Flex>
    </Section>
  )
}

export default Home

在开发模式下一切正常，但是当我构建应用程序时，我有两个家 div，最奇怪的是其中一个主题围绕着我的主主题，它在布局中取代了这个主题:

 <>
      <Box
        bgGradient={
          colorMode !== "dark" ? "radial(bgOrange.100,  bgOrange.500 );" : ""
        }
        position="absolute"
        w="100%"
        zIndex="-2"
      >
...

为什么会这样？

此外，当我切换颜色模式时，一切都会恢复正常。感谢您的帮助

Answer 1

原来我忘了在 gatsby-ssr 中添加包装器

盖茨比-ssr.js

     import React from "react"
     import { ColorModeScript } from "@chakra-ui/react"
    +
    +import { wrapPageElement as wrap } from "./src/woot-wrapper"
    +export const wrapPageElement = wrap
    +
     export const onRenderBody = ({ setPreBodyComponents }) => {
  ...

src/woot-wrapper.js

import { ChakraProvider } from "@chakra-ui/react"
import theme from "./@chakra-ui/gatsby-plugin/theme"
import React from "react"
import Layout from "./components/layout"
export const wrapPageElement = ({ element }) => {
  return (
    <ChakraProvider theme={theme} resetCSS>
      <Layout>{element}</Layout>
    </ChakraProvider>
  )
}

Div 在生产中不在正确的位置（使用脉轮 Ui）

Div is not at the right place in production (using chakraUi)

reactjs

gatsby

chakra-ui