React Chakra UI 模态仅显示覆盖答案

【问题标题】：React Chakra UI modal only shows overlayReact Chakra UI 模态仅显示覆盖
【发布时间】：2021-05-30 09:29:23
【问题描述】：

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

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

【问题讨论】：

你解决了吗？

标签： html css reactjs chakra-ui

【解决方案1】：

我尝试重现您的问题并发现 - 要使 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> 中。

希望它对你有用。

【讨论】：

【解决方案2】：

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

【讨论】：

在另一个答案中：you need to set up the ChakraProvider at the root of your application