英文:
Mantine Modal not showing
问题
我使用 Vite 创建了一个 React 应用程序，并安装了 Mantine v6.0.0。当我调用以下函数来打开 Mantine 模态框时，视图变暗，但模态框不可见。
const openModal = () => modals.openConfirmModal({
title: '请确认您的操作',
children: (
<Text size="sm">
这个操作非常重要，您需要通过模态框来确认。请点击其中一个按钮继续。
</Text>
),
labels: { confirm: '确认', cancel: '取消' },
onCancel: () => console.log('取消'),
onConfirm: () => console.log('已确认'),
});
英文:
I created a React App using Vite and installed Mantine v6.0.0. When I call the following function to open a Mantine modal the view dims however the modal is not visible.
const openModal = () => modals.openConfirmModal({
title: 'Please confirm your action',
children: (
<Text size="sm">
This action is so important that you are required to confirm it with a modal. Please click
one of these buttons to proceed.
</Text>
),
labels: { confirm: 'Confirm', cancel: 'Cancel' },
onCancel: () => console.log('Cancel'),
onConfirm: () => console.log('Confirmed'),
});
答案1
得分: 12
事实证明，vite react模板导入了一些默认样式（index.css），这些样式阻止了模态框正确显示。我一旦移除了包含以下CSS属性的CSS导入，模态框就正常工作了。
body {
display: flex;
}
英文:
Turns out that the vite react template imported some default styling (index.css) which prevented the modal from showing properly. As soon as I removed the css import which included the following css property the modal worked fine.
body {
display: flex
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论