Чакра пользовательского интерфейса: фон не тускнеет при открытии ящика. ⇐ CSS

[Anonymous]

Я впервые использую пользовательский интерфейс чакры для своего проекта. Я следую документации для реализации пользовательского интерфейса. Пример ящика, упомянутый в документации, работает отлично. Но когда я пытаюсь использовать то же самое для своего проекта, фон не тускнеет.
Вот тот же скриншот.


Ниже приведен его код.
Имя файла: Campaigns.js

Компонент ящика находится в конце файла (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 (

{icon && (

)}
{children}

);
};

const SidebarContent = (props) => (



cffp



Home
Articles
Collections
Checklists

Integrations




Shopify


Slack


Zapier


Changelog
Settings


);
return (



















Create 




















);
}

Имя файла: 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 (




Create a new account





Name




Url

http://

.com




Select Owner

Segun Adebayo
Kola Tioluwani




Description







Cancel

Submit



)
}

export default CreateCampaign;

Подробнее здесь: https://stackoverflow.com/questions/691 ... awer-opens