如何在ChakraUI中使用react-spring parallax？

数据老陈

2026-7-7

react-spring/parallax 与 ChakraUI 集成空白问题

问题背景

原本在Tailwind项目中正常运行的react-spring/parallax着陆页代码，迁移到基于ChakraUI搭建的主项目后页面变为空白。空项目中单独运行该Parallax着陆页组件完全正常，但放到主项目后，浏览器HTML无有效内容，控制台和终端均无报错。即使移除导航栏仅保留Parallax组件，问题仍未解决，推测是二者存在兼容问题。

主项目核心代码

function App() {
  const [isMobile] = useMediaQuery("(max-width: 768px)");
  const [isTablet] = useMediaQuery("(max-width: 1256px)");
  const { isLoading, error } = useAuth0();
  return (
    <Flex>
      <BrowserRouter>
{/*导航面板相关代码*/}

        <Routes>
          <Route path="/" element={<LandingPage />} />
          <Route
            path="/dashboard"
            element={!error && !isLoading ? <Dashboard /> : <Navigate to="/" />}
          />
          <Route path="/subscription" element={<Subscription></Subscription>} />
          <Route path="/pembahasan" element={<Pembahasan />} />
        </Routes>
      </BrowserRouter>
    </Flex>
  );
}

export default App;