I want to change the size of the chakra ui drawer

user_10922854 0
Viewed 2257

I'm using chakra ui and I want to set the width of the drawer component to 370px. I want to set the width of the drawer component to 370px. If I pass sm or lg as the size, it will change the size to the default setting, but I can't change it to the size I want.

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

  <Drawer
    isOpen={isOpen}
    placement="right"
    onClose={onClose}
    finalFocusRef={btnRef}
    size="lg"
  >
chakra-ui typescript reactjs
2 Answers

Ideally a new 'size' should be added to the theme and use the new size for <Drawer/>. This works alright when sidebar width is fixed (but custom).

However, if sidebar width is dynamic (set by dragging the sidebar edge or for some other reason) you need to set sidebar width manually.

One way is to add w={customSidebarWidth} and maxW={customSidebarWidth} to <DrawerContent/>. Also consider removing padding on <DrawerBody/>.

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

You have to override the dialog props i.e 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;

Then use it on the Drawer component

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