已正确安装Chakra UI但React项目中样式不生效求助

我已按照Chakra UI的React安装文档完成操作，目标组件在独立项目中可正常运行，但将其加入当前项目后，样式完全不生效，仅显示纯HTML结构。

相关代码文件 #

index.js #

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { ChakraProvider, theme } from "@chakra-ui/react";
import Test from "./pages/Test";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <ChakraProvider theme={theme} />
        <Test />
    <ChakraProvider />
  </React.StrictMode>
);

Test.js #

import React, { ReactNode } from 'react';
import {
    IconButton,
    Avatar,
    Box,
    CloseButton,
    Flex,
    HStack,
    VStack,
    Icon,
    useColorModeValue,
    Link,
    Drawer,
    DrawerContent,
    Text,
    useDisclosure,
    BoxProps,
    FlexProps,
    Menu,
    MenuButton,
    MenuDivider,
    MenuItem,
    MenuList,
} from '@chakra-ui/react';
import {
    FiHome,
    FiTrendingUp,
    FiCompass,
    FiStar,
    FiSettings,
    FiMenu,
    FiBell,
    FiChevronDown,
} from 'react-icons/fi';
import { IconType } from 'react-icons';
import { ReactText } from 'react';
import Rideshare from './Rideshare'
// ... 剩余代码

package.json（依赖部分） #

"dependencies": {
    "@chakra-ui/react": "^2.3.7",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@react-google-maps/api": "^2.13.1",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.19.2",
    "bootstrap": "^5.1.3",
    "dayjs": "^1.11.6",
    "framer-motion": "^6.5.1",
    "http-proxy-middleware": "^2.0.6",
    "jwt-decode": "^3.1.2",
    "query-string": "^6.13.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.6.0",
    "react-redux": "^7.2.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "react-slick": "^0.29.0",
    "reactstrap": "^9.1.1",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "remixicon": "^2.5.0",
    "slick-carousel": "^1.8.1",
    "web-vitals": "^2.1.4"
  }

已尝试的解决方法 #

我曾执行以下命令重新安装Chakra UI相关依赖，但问题未解决：

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

核心问题：ChakraProvider使用错误 #

你的index.js中把Test组件放在了两个ChakraProvider标签之外，导致Test组件没有被Chakra的上下文包裹，无法读取Chakra的样式配置。正确的做法是用单个ChakraProvider包裹所有需要使用Chakra样式的组件。

修改后的index.js代码 #

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { ChakraProvider, theme } from "@chakra-ui/react";
import Test from "./pages/Test";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <ChakraProvider theme={theme}>
      <Test />
      {/* 如果App也需要Chakra样式，同样放在Provider内部 */}
      <App />
    </ChakraProvider>
  </React.StrictMode>
);

额外排查方向 #

1. 全局样式冲突：项目中同时引入了bootstrap和reactstrap，可能与Chakra的全局样式产生冲突。可临时移除这两个依赖测试样式是否恢复正常，若正常则需通过Chakra的css属性或自定义主题做样式隔离。
2. 依赖版本校验：确认framer-motion版本与@chakra-ui/react兼容（Chakra UI 2.x要求framer-motion 6.x及以上，你的版本6.5.1符合要求）。
3. 重复依赖检查：执行npm ls @chakra-ui/react查看是否存在多版本依赖冲突，若有则删除node_modules和package-lock.json后重新安装所有依赖。

内容的提问来源于stack exchange，提问作者imran.ke