I want to change the size of the chakra ui drawer

Question

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"
  >

Answer 1

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}>