我正在尝试使用 React Material UI
Modal
,但当它聚焦时,我总是在模态周围出现黑色边框。当边框失焦时,我已经删除了边框,但如果模态聚焦,边框就会回来。关于如何删除它有什么建议吗?
https://codesandbox.io/s/material-demo-kk0ux?file=/demo.js
const useStyles = makeStyles(theme => ({
paper: {
position: "absolute",
width: 400,
backgroundColor: theme.palette.background.paper,
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3)
},
modal: {
"&:focus": {
outline: "none"
}
}
}));
export default function SimpleModal() {
const classes = useStyles();
// getModalStyle is not a pure function, we roll the style only on the first render
const [modalStyle] = React.useState(getModalStyle);
const [open, setOpen] = React.useState(false);
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const body = (
<div style={modalStyle} className={classes.paper}>
<h2 id="simple-modal-title">Text in a modal</h2>
<p id="simple-modal-description">
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
</p>
<SimpleModal />
</div>
);
return (
<div>
<button type="button" onClick={handleOpen}>
Open Modal
</button>
<Modal
className={classes.modal}
open={open}
onClose={handleClose}
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
>
{body}
</Modal>
</div>
);
}
将 Modal 标签的主体包裹在 a 中并提供 Outline: none 作为样式
<div style={{outline:'none'}}>
{body}
</div>
将其添加到你的 makeStyles 中
modal:{
"&:focus":{
outline: 'none"
}
}
Modal
是一个低级组件,用于创建 Dialog
,在大多数情况下应该首选它。默认情况下,Modal
容器本身没有边框,如果您从第一个示例here复制代码,如果您不想要,您可能需要删除 border
和 boxShadow
属性:
const style = {
position: 'absolute' as 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 400,
bgcolor: 'background.paper',
// comment the 2 lines below
// border: '2px solid #000',
// boxShadow: 24,
p: 4,
};
const style = {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
// width: 400,
bgcolor: 'background.paper',
boxShadow: 24,
borderRadius: '20px',
background: '#FFF',
outline: 'none', // add this in your code
};
<Modal
open={modalStatus}
onClose={modalHandleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
/* add style here in the box */
<Box sx={style}>Hello</Box>
</Modal>