[英]Remove border from MUI Modal
我正在尝试使用 React MUI 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>
);
}
改为在您的论文中设置outline: 'none'
。 这将解决您的问题。
另外,我认为您应该按照docs中的建议使用<Dialog>
。 没有那个焦点,你会保持你的行为。
将 Modal 标记的主体包裹在 a 中并提供 outline: none 作为样式
<div style={{outline:'none'}}>
{body}
</div>
将此添加到您的 makeStyles
modal:{
"&:focus":{
outline: 'none"
}
}
Modal
是创建Dialog
的低级组件,在大多数情况下应该首选它。 默认情况下, Modal
容器本身没有边框,如果您从此处复制第一个示例中的代码,您可能需要删除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,
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.