使用ChakraProvider组件时，我需要解决以下警告的帮助
- “警告React域名.development.js：86警告：您正在从不受支持的“react-dom”导入hydrateRoot。您应该改为从“react-dom/client”导入。"*
设置：我有一个工作的nextjs应用程序，使用Redux工具包。应用程序打破了上述警告后，增加了chakra UI和设置如下
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
import Head from "next/head";
import "bootstrap/dist/css/bootstrap.min.css";
import "../styles/globals.css";
import Layout from "../components/layout/layout";
import { Provider } from "react-redux";
import { store } from "../store/app/store";
import { ChakraProvider, extendTheme } from "@chakra-ui/react";//导入ChakraProvider，extendTheme时会发出此警告。应用程序可以正常工作。但是，当主题配置设置为使用下面的颜色时，即使删除了ChakraProvider Package ，站点也会中断。冲突可能来自哪里？
const colors = {
brand: {
900: "#1a365d",
800: "#153e75",
700: "#2a69ac",
},
};
const theme = extendTheme({ colors });
function MyApp({ Component, pageProps }) {
return (
<Provider store={store}>
<ChakraProvider resetCSS theme={theme}>
<Layout>
<Head>
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css"
/>
</Head>
<Component {...pageProps} />
</Layout>
</ChakraProvider>
</Provider>
);
}
export default MyApp;
1条答案
按热度按时间jk9hmnmh1#
我也遇到过类似的问题，帮助我的是把“使用客户端”放在脉轮组件文件的顶部。