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'),
});
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
}