reactjs - 我想更改 chakra ui 抽屉的大小

Question

我正在使用 chakra ui，我想将抽屉组件的宽度设置为 370px。我想将抽屉组件的宽度设置为 370px。如果我传递 sm 或 lg 作为尺寸，它会将尺寸更改为默认设置，但我无法将其更改为我想要的尺寸。

https://chakra-ui.com/docs/overlay/drawer

  <Drawer
    isOpen={isOpen}
    placement="right"
    onClose={onClose}
    finalFocusRef={btnRef}
    size="lg"
  >

Answer 1

理想情况下，应将新的“尺寸”添加到主题中并将新尺寸用于 <Drawer/> .当侧边栏宽度固定(但自定义)时，这可以正常工作。

但是，如果侧边栏宽度是动态的(通过拖动侧边栏边缘或其他原因设置)，则需要手动设置侧边栏宽度。

一种方法是添加 w={customSidebarWidth}和 maxW={customSidebarWidth}至 <DrawerContent/> .还可以考虑删除 <DrawerBody/> 上的填充.

...
<DrawerContent w={customSidebarWidth} maxW={customSidebarWidth}>
    ...
    <DrawerBody p={0}>
        ...
        ...
    </DrawerBody>
    ...
    ...
</DrawerContent>
...