reactjs - 我想改变脉轮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>
...

Answer 2

您可以创建一个sass或css文件并将其导入component您正在使用的文件。这个选择器可以改变你想要css 的值的宽度：Drawer

.chakra-modal__content{
   max-width:370px
}