'Backdrop not dimming for Material UI's Modal after applying transform css property to modal

I am using Material UI's modal to render content. It works great. However, after applying css of transform: 'translate(-50%, -50%)', on my modal, the background dimming look doesnt work anymore. By default it does dim the background behind the modal. Been searching online to see if anyone else has encountered this issue but no one seems to have asked this question before. Please see my code below. Thanks.

Modal

<Modal
       className={classes.modal}
       open={openModal}
       onClose={() => setOpenModal(false)}
       onBackdropClick={() => setOpenModal(false)}>
        <Paper>
         {modalType === 'Buy' && renderBuywModal()}
        </Paper>
    </Modal>

Modal CSS

  modal: {
    top: '50%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    transform: 'translate(-50%, -50%)',
    padding: 0,
    border: 'none',
    width: '60%'
  },
javascriptcssreactjsmaterial-uimodal-dialog


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions