Material UI style 如何从下图中的模式背景中删除轮廓

Question

我尝试将边框设置为 none 并将框阴影设置为 none，但没有任何效果。这些线条仅在单击模态主体时出现。我省略了模态样式代码，因为它只包含 flex 样式等。下面的代码是模态的实现：

<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

我在另一个项目上解决类似问题时无意中找到了这个问题的解决方案。

应将伪选择器添加到 classes.modal 样式的内容中：

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

以上代码确保当模态框处于焦点时，轮廓值将被设置 none 无论是否有覆盖代码。

Material UI style 如何从下图中的模式背景中删除轮廓

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

css

modal-dialog

reactjs

material-ui