1

我在 React with 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>
    </>
  );
}

一旦我点击打开模态按钮，它只会显示没有模态实际内容的覆盖。

4

2 回答 2

0

我试图重现您的问题并发现 - 要使 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>
 )}

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

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

希望对你有效。

于 2021-05-30T18:16:22.513 回答
-2

首先检查您是否使用 ChakraProvider 包装了您的应用程序（如果提供）

于 2021-07-13T17:45:56.267 回答