Material UI style How do I remove the outline(s) from the modal backdrop in the image below

Question

I have tried to set the border to none and also the box Shadow to none, nothing works. The lines only appear when the modal body is clicked. I omitted the modal styling code because it only contains flex styling, etc. The code below is the implementation for the modal:

<Modal aria-labelledby="transition-modal-title" aria-describedby="transition-modal-description" 
                className={classes.modal} open={state.open} onClose={handleClose} closeAfterTransition BackdropComponent={Backdrop}
                BackdropProps={{ 
                    timeout: 500, classes: { root: classes.backDrop }
                }}
            >
                <Fade in={state.open}>
                    <Column gap={2} style={{width:'50%',height:'70%'}}>
                        <Row
                            style={{width: '100%',position:'relative',left:'5%',marginTop:'2%', boxShadow:'none',border:'none' }} 
                            className={classes.modal}
                        >
                            <Item bgcolor="background.paper" position={'middle'} width={345.6} style={{borderRadius:'4px'}}>
                                {/***code cut out**/}
                                <br/>
                                <Button
                                    style={{
                                        width: '60%', backgroundColor: 'white', marginLeft:'20%',
                                        color: "black", textTransform: 'none', fontSize: '10px', height:'12px'
                                    }} variant="text"
                                    onClick={handleClose}
                                ><b>Return to Nike store</b>
                                </Button>
                            </Item>
                            <IconButton onClick={handleClose} style={{
                                position: 'relative', top: '-60%', left: '7.7%', transform: 'translate(-50%, -50%)',
                            }}>
                                <ClearOutlinedIcon style={{
                                    color:'#000',border:'1px solid #fff',borderRadius:'100%',background:'#fff',
                                    width: '35px', height:'35px'
                                }} />
                            </IconButton>
                        </Row>
                        <Row
                            style={{width: '100%'}} 
                            className={classes.modal}
                        >
                            <Item position={'middle'} width={345.8}>                            
                                <Typography style={{color: "#fff", display: 'flex',
                                    fontSize: '10px', justifyContent: 'center', maxWidth:'60%', marginLeft:'15%'
                                }}>
                                    <Lock style={{ fontSize: '14px', justifyContent: 'center', fontFamily: 'Comfortaa'}} />
                                    &nbsp; payments by &nbsp; <b>SlashIt</b>
                                </Typography>
                            </Item>
                        </Row>
                        <Row style={{width: '100%'}} className={classes.modal} >
                            <Item position={'middle'} width={345.8}>                            
                                <Typography style={{color: "#fff", display: 'flex',
                                    fontSize: '10px', justifyContent: 'center', maxWidth:'60%', marginLeft:'17%',
                                    marginTop:'-2%'
                                }}>
                                    Terms &nbsp; &nbsp; &nbsp; Privacy
                                </Typography>
                            </Item>
                        </Row>
                    </Column>
                </Fade>
            </Modal>

Answer 1

I accidentally found a solution to this problem while resolving similar problems on a different project.

A pseudo-selector should be added be added to the content of the classes.modal styling:

...,
modal: {
  ...,
  '&:focus' : {
      outline: 'none !important';
   }
}

The above snippet makes sure that when the modal is in focus, the outline value will be set none whether or not there's an overriding code.