Chakra UI : The background does not dim when the drawer opens - css

Question

This is the first time I am using chakra UI for my project. I am following the documentation to implement the UI. The drawer example mentioned in the documentation works perfectly. But when I try to use the same for my project the background does not dim.
Here is the screenshot of the same.
Below is the code for the same.
Filename: Campaigns.js
The drawer component is at the end of the file (CreateCampaign)
import React from "react";
import {
Avatar,
Box,
Collapse,
DrawerContent,
DrawerOverlay,
Flex,
Icon,
IconButton,
Input,
InputGroup,
InputLeftElement,
Text,
useColorModeValue,
useDisclosure,
useColorMode,
Button,
Drawer,
} from "#chakra-ui/react";
import {AddIcon} from '#chakra-ui/icons';
import { FaBell, FaClipboardCheck, FaRss } from "react-icons/fa";
import { FaMoon, FaSun } from "react-icons/fa";
import { AiFillGift } from "react-icons/ai";
import { BsGearFill } from "react-icons/bs";
import { FiMenu, FiSearch } from "react-icons/fi";
import { HiCode, HiCollection } from "react-icons/hi";
import { MdHome, MdKeyboardArrowRight } from "react-icons/md";
import { BrowserRouter, Switch, Route,useRouteMatch } from 'react-router-dom';
import DonationBasedForm from '../../components/CreateDonationBased/CreateDonationBased'
import Campaigns from "../Campaigns/Campaigns";
import CreateCampaign from "../../components/CreateCampaign/CreateCampaign";
export default function Swibc() {
const sidebar = useDisclosure();
const integrations = useDisclosure();
// Create campaign drawer hooks
const { isOpen, onOpen, onClose } = useDisclosure();
const btnRef = React.useRef();
let { path, url } = useRouteMatch();
const { toggleColorMode: toggleMode } = useColorMode();
const SwitchIcon = useColorModeValue(FaMoon, FaSun);
const NavItem = (props) => {
const { icon, children, ...rest } = props;
return (
<Flex
align="center"
px="4"
pl="4"
py="3"
cursor="pointer"
color={useColorModeValue("inherit", "gray.400")}
_hover={{
bg: useColorModeValue("gray.100", "gray.900"),
color: useColorModeValue("gray.900", "gray.200"),
}}
role="group"
fontWeight="semibold"
transition=".15s ease"
{...rest}
>
{icon && (
<Icon
mr="2"
boxSize="4"
as={icon}
/>
)}
{children}
</Flex>
);
};
const SidebarContent = (props) => (
<Box
as="nav"
pos="fixed"
top="0"
left="0"
zIndex="sticky"
h="full"
pb="10"
overflowX="hidden"
overflowY="auto"
bg={useColorModeValue("white", "gray.800")}
borderColor={useColorModeValue("inherit", "gray.700")}
borderRightWidth="1px"
w="60"
{...props}
>
<Flex px="4" py="5" align="center">
<Text
fontSize="2xl"
ml="2"
color={useColorModeValue("brand.500", "white")}
fontWeight="semibold"
>
cffp
</Text>
</Flex>
<Flex
direction="column"
as="nav"
fontSize="sm"
color="gray.600"
aria-label="Main Navigation"
>
<NavItem icon={MdHome}>Home</NavItem>
<NavItem icon={FaRss}>Articles</NavItem>
<NavItem icon={HiCollection}>Collections</NavItem>
<NavItem icon={FaClipboardCheck}>Checklists</NavItem>
<NavItem icon={HiCode} onClick={integrations.onToggle}>
Integrations
<Icon
as={MdKeyboardArrowRight}
ml="auto"
transform={integrations.isOpen && "rotate(90deg)"}
/>
</NavItem>
<Collapse in={integrations.isOpen}>
<NavItem pl="12" py="2">
Shopify
</NavItem>
<NavItem pl="12" py="2">
Slack
</NavItem>
<NavItem pl="12" py="2">
Zapier
</NavItem>
</Collapse>
<NavItem icon={AiFillGift}>Changelog</NavItem>
<NavItem icon={BsGearFill}>Settings</NavItem>
</Flex>
</Box>
);
return (
<>
<Box
as="section"
bg={useColorModeValue("gray.50", "gray.700")}
minH="100vh"
>
<SidebarContent display={{ base: "none", md: "unset" }} />
<Drawer
isOpen={sidebar.isOpen}
onClose={sidebar.onClose}
placement="left"
>
<DrawerOverlay />
<DrawerContent>
<SidebarContent w="full" borderRight="none" />
</DrawerContent>
</Drawer>
<Box ml={{ base: 0, md: 60 }} transition=".3s ease">
<Flex
as="header"
align="center"
justify="space-between"
w="full"
px="4"
bg={useColorModeValue("white", "gray.800")}
borderBottomWidth="1px"
borderColor={useColorModeValue("inherit", "gray.700")}
h="14"
>
<IconButton
aria-label="Menu"
display={{ base: "inline-flex", md: "none" }}
onClick={sidebar.onOpen}
icon={<FiMenu />}
size="sm"
/>
<InputGroup w="96" display={{ base: "none", md: "flex" }}>
<InputLeftElement color="gray.500" children={<FiSearch />} />
<Input placeholder="Search for articles..." />
</InputGroup>
<Flex align="center">
<Button
colorScheme="brand"
size="sm"
mr={[1,1,3]}
onClick={onOpen}
ref={btnRef}
>
Create <AddIcon ml={[1,1,2]} />
</Button>
<Avatar
mr="4"
size="sm"
name="anubra266"
src="https://avatars.githubusercontent.com/u/30869823?v=4"
cursor="pointer"
/>
<Icon mr={4} ml={4} color="gray.500" as={SwitchIcon} cursor="pointer" onClick={toggleMode}/>
</Flex>
</Flex>
<Box as="main" p="4">
<Switch>
<Route path={path} exact>
<Campaigns />
</Route>
<Route path={`${path}/new`}>
<DonationBasedForm />
</Route>
</Switch>
</Box>
</Box>
</Box>
<CreateCampaign onClose={onClose} isOpen={isOpen} btnRef={btnRef}/>
</>
);
}
Filename : CreateCampaigns.js
import React from 'react';
import {
Drawer,
DrawerContent,
DrawerCloseButton,
DrawerFooter,
DrawerBody,
DrawerHeader,
Stack,
Box,
FormLabel,
InputGroup,
Input,
InputLeftAddon,
InputRightAddon,
Textarea,
Button,
Select
} from '#chakra-ui/react';
const CreateCampaign = (props) => {
return (
<Drawer
isOpen={props.isOpen}
placement="right"
onClose={props.onClose}
size="xl"
>
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader borderBottomWidth="1px">
Create a new account
</DrawerHeader>
<DrawerBody>
<Stack spacing="24px">
<Box>
<FormLabel htmlFor="username">Name</FormLabel>
<Input
id="username"
placeholder="Please enter user name"
/>
</Box>
<Box>
<FormLabel htmlFor="url">Url</FormLabel>
<InputGroup>
<InputLeftAddon>http://</InputLeftAddon>
<Input
type="url"
id="url"
placeholder="Please enter domain"
/>
<InputRightAddon>.com</InputRightAddon>
</InputGroup>
</Box>
<Box>
<FormLabel htmlFor="owner">Select Owner</FormLabel>
<Select id="owner" defaultValue="segun">
<option value="segun">Segun Adebayo</option>
<option value="kola">Kola Tioluwani</option>
</Select>
</Box>
<Box>
<FormLabel htmlFor="desc">Description</FormLabel>
<Textarea id="desc" />
</Box>
</Stack>
</DrawerBody>
<DrawerFooter borderTopWidth="1px">
<Button variant="outline" mr={3} onClick={props.onClose}>
Cancel
</Button>
<Button colorScheme="blue">Submit</Button>
</DrawerFooter>
</DrawerContent>
</Drawer>
)
}
export default CreateCampaign;

Answer 1

You'll need to use the DrawerOverlay component:
import { DrawerOverlay } from '#chakra-ui/react'
As seen in this example on line 30, the DrawerOverlay component should be at the top of the Drawer component:
import React from 'react';
import {
Drawer,
DrawerOverlay,
DrawerContent,
DrawerCloseButton,
DrawerFooter,
DrawerBody,
DrawerHeader,
Stack,
Box,
FormLabel,
InputGroup,
Input,
InputLeftAddon,
InputRightAddon,
Textarea,
Button,
Select
} from '#chakra-ui/react';
const CreateCampaign = (props) => {
return (
<Drawer
isOpen={props.isOpen}
placement="right"
onClose={props.onClose}
size="xl"
>
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader borderBottomWidth="1px">
Create a new account
</DrawerHeader>
<DrawerBody>
<Stack spacing="24px">
<Box>
<FormLabel htmlFor="username">Name</FormLabel>
<Input
id="username"
placeholder="Please enter user name"
/>
</Box>
<Box>
<FormLabel htmlFor="url">Url</FormLabel>
<InputGroup>
<InputLeftAddon>http://</InputLeftAddon>
<Input
type="url"
id="url"
placeholder="Please enter domain"
/>
<InputRightAddon>.com</InputRightAddon>
</InputGroup>
</Box>
<Box>
<FormLabel htmlFor="owner">Select Owner</FormLabel>
<Select id="owner" defaultValue="segun">
<option value="segun">Segun Adebayo</option>
<option value="kola">Kola Tioluwani</option>
</Select>
</Box>
<Box>
<FormLabel htmlFor="desc">Description</FormLabel>
<Textarea id="desc" />
</Box>
</Stack>
</DrawerBody>
<DrawerFooter borderTopWidth="1px">
<Button variant="outline" mr={3} onClick={props.onClose}>
Cancel
</Button>
<Button colorScheme="blue">Submit</Button>
</DrawerFooter>
</DrawerContent>
</Drawer>
)
}
export default CreateCampaign;
I hope that this answers your question!