how to make custom sized modal in chakra UI

user_14951612 0
Viewed 4226

i want to create custom sized modals in chakra UI in react js. the modal should have width 1000px and height 800px I have tried to create a custom sized modal by using themes where I have overriden the xl size of modal but it doesn't work

const theme = extendTheme({
  breakpoints,
  config,
  fonts: {
    heading: "Nunito",
    body: "Nunito",
  },
  components:{
Modal:{
  sizes:{
    xl:{     
        h:"600px",
        w:'1000px',
      },     
    }
  }
}
},
  colors: {
    yellow: {
      100: "#FFBE17",
    },
    green: {
      100: "#45C79B",
    },
    red: {
      100: "#E8736F",
    },
   
    gray: {
      100: "#D1D1D1",
      200:'#E5E5E5',
      300:"#C4C4C4"
    },
  },
});

 components:{
Modal:{
  sizes:{
    xl:{
      h:"600px",
      w:'1000px',
     
    }
  }
}

chakra-ui reactjs
4 Answers

You can do something like

<Modal>
  <ModalContent h='600px' w='1000px'>
    <Box>
      Modal Content :)
    <Box>
  </ModalContent>
</Modal>
user_169927700

You can do something like this using theme.

components:{
    Modal:{
     baseStyle: {
            dialog: {
                maxHeight: "calc(100vh - 50px)",
                overflowY: "auto",
            }
        }
    }
 }
user_141005430

Modal component has a Modal prop named Id, which you can use in the component to modify it with css in the following way.

<Modal id='mymodal'>
   ...
</Modal>

The moment the page is being rendered, chakra will name the modal id in the next form: 'chakra-modal-mymodal'. Then you can target your css rules according to that.

#chakra-modal-mymodal {
    height:600px;
    // There is a max-width rule used by chakra-ui,
    // thus you need to overwrite it to make it work.
    max-width:1000px; 
}
user_151046390

Do something like this:

<ModalContent maxH="400px" maxW="500px">
 {...}
</ModalContent>
user_130473900
Related