我想更改 chakra ui 抽屉的大小

Question

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

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

您必须覆盖对话框道具，即 maxW

import { extendTheme } from "@chakra-ui/react";
const theme = extendTheme({
  components: {
    Drawer: {
      parts: ['dialog', 'header', 'body'],
      variants: {
        primary: {
        secondary: {
          dialog: {
            maxW: "220px",
            
          }
        }
      },  
    },

});
export default theme;

然后在Drawer组件上使用

<Drawer  variant="secondary"  placement={placement} onClose={onClose} isOpen={isOpen}>