React Chakra UI 模式只显示叠加层

问题描述

我在 React 和 Typescript 中使用 Chakra UI，遇到了一个奇怪的问题，我试图在 modal.tsx 文件中使用以下代码实现 Modal。

import {
  usedisclosure,Button,Modal,Modaloverlay,ModalContent,ModalHeader,ModalCloseButton,ModalBody,ModalFooter,} from "@chakra-ui/react";

export default function CustomModal() {
  const { isOpen,onopen,onClose } = usedisclosure();

  return (
    <>
      <Button onClick={onopen}>Open Modal</Button>

      <Modal cloSEOnOverlayClick={false} isOpen={isOpen} onClose={onClose}>
        <Modaloverlay />
        <ModalContent>
          <ModalHeader>Create your account</ModalHeader>
          <ModalCloseButton />
          <ModalBody pb={6}></ModalBody>

          <ModalFooter>
            <Button colorScheme="blue" mr={3}>
              Save
            </Button>
            <Button onClick={onClose}>Cancel</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
}

一旦我单击“打开模态”按钮，它只会显示覆盖层，而不会显示模态的实际内容。

解决方法

我尝试重现您的问题并发现 - 要使 Chakra UI 正常工作，您需要在应用程序的根目录中设置 ChakraProvider。

import * as React from "react"
// 1. import `ChakraProvider` component
import { ChakraProvider } from "@chakra-ui/react"

function App({ Component }) {
// 2. Use at the root of your app
 return (
    <ChakraProvider>
      <Component />
    </ChakraProvider>
 )}

这是您的问题的运行代码沙箱 link。

在 App.js 中，我将应用程序包装在 <ChakraProvider> 中。

希望它对你有用。

,

首先检查您是否使用 ChakraProvider 包装了您的应用程序