reactjs Chakra UI即使在正确安装后也无法工作

mwecs4sa 于 9个月前发布在 React

关注(0)|答案(2)|浏览(61)

我已经遵循了React.js中关于Chakra UI安装的文档。我正在处理的组件在一个单独的项目中工作，但当我将其添加到当前项目时，它并不具有样式。而是显示纯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'
....
rest of my  code

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

但这个解决方案并不奏效我的package.json显示Chakra-UI已安装。

reactjs

来源：https://stackoverflow.com/questions/74416133/chakra-ui-not-working-even-after-correct-installation

2条答案

按热度按时间

xkftehaa1#

我已经去了，并试图检查了一些documentation在这方面。看起来你需要把脉轮提供者放在你项目的根目录下。
另一个问题可能是<React.StrictMode>不呈现任何可见的UI，因此您可能必须删除它

赞(0）回复(0）举报 9个月前

yks3o0rb2#

在index.js文件中有一个错字。
将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>
);

希望这有帮助;）

赞(0）回复(0）举报 9个月前

我来回答

reactjs Chakra UI即使在正确安装后也无法工作

2条答案

相关问题

热门标签

最新问答