I have followed the docs on Chakra UI installation in React.js. The component I'm working on works in a separate project but the moment I add it to the current project, it does not the styles. Instead displays plain 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"
},
.....
I have tried reinstalling Chakra-UI using the command
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
but this solution hasn't worked. My package.json
shows that Chakra-UI is installed.
I have gone and tried to check up on some documentation on this. Looks like you need to place the Chakra Provider in the root of your project.
Another problem may be that <React.StrictMode> doesn't render any visible UI, so you may have to remove that