如何在 Chakra UI 中制作自定义大小的模态

Question

我想在 React js 的 chakra UI 中创建自定义大小的模态。模态应该具有宽度 1000px 和高度 800px 我尝试使用主题创建自定义大小的模态，其中我覆盖了模态的 xl 大小，但它不起作用

const theme = extendTheme({
  breakpoints,
  config,
  fonts: {
    heading: "Nunito",
    body: "Nunito",
  },
  components:{
Modal:{
  sizes:{
    xl:{     
        h:"600px",
        w:'1000px',
      },     
    }
  }
}
},
  colors: {
    yellow: {
      100: "#FFBE17",
    },
    green: {
      100: "#45C79B",
    },
    red: {
      100: "#E8736F",
    },
   
    gray: {
      100: "#D1D1D1",
      200:'#E5E5E5',
      300:"#C4C4C4"
    },
  },
});

 components:{
Modal:{
  sizes:{
    xl:{
      h:"600px",
      w:'1000px',
     
    }
  }
}

Answer 1

做这样的事情：

<ModalContent maxH="400px" maxW="500px">
 {...}
</ModalContent>

Answer 2

你可以做类似的事情

<Modal>
  <ModalContent h='600px' w='1000px'>
    <Box>
      Modal Content :)
    <Box>
  </ModalContent>
</Modal>