如何在React的Chakra UI中创建自定义尺寸的Modal弹窗

问题根因 #

• 你的extendTheme配置存在语法错误：在components配置块结束后额外写了一个闭合大括号，导致components配置未被正确纳入主题配置，自定义尺寸规则直接失效。
• Modal的主题尺寸配置格式不符合Chakra UI规范：Modal的尺寸样式作用于内部ModalContent组件，对应主题配置的dialog字段，不能直接在size节点下写宽高属性。

方法1：修复主题配置实现全局自定义xl尺寸 #

修正后的完整主题配置如下，配置后全局所有指定size="xl"的Modal都会自动应用1000px宽、800px高的尺寸：

const theme = extendTheme({
  breakpoints,
  config,
  fonts: {
    heading: "Nunito",
    body: "Nunito",
  },
  components:{
    Modal:{
      sizes:{
        xl:{
          // 样式需要指定作用在dialog（即ModalContent）节点上
          dialog: {
            h:"800px",
            w:'1000px',
          }
        }
      }
    }
  },
  colors: {
    yellow: {
      100: "#FFBE17",
    },
    green: {
      100: "#45C79B",
    },
    red: {
      100: "#E8736F",
    },
    gray: {
      100: "#D1D1D1",
      200:'#E5E5E5',
      300:"#C4C4C4"
    },
  },
});

方法2：单组件局部自定义尺寸（无需修改主题） #

如果只有个别Modal需要该尺寸，不需要全局覆盖，可以直接给ModalContent组件加sx属性自定义样式：

<Modal isOpen={isOpen} onClose={onClose}>
  <ModalOverlay />
  <ModalContent sx={{ width: '1000px', height: '800px', overflowY: 'auto' }}>
    {/* Modal其他内容 */}
    <ModalHeader>自定义标题</ModalHeader>
    <ModalCloseButton />
    <ModalBody>
      内容区域，添加overflowY: 'auto'后内容超出高度会自动滚动
    </ModalBody>
    <ModalFooter>
      底部操作区
    </ModalFooter>
  </ModalContent>
</Modal>

内容的提问来源于stack exchange，提问作者Ruchi Ray