Mantine 莫代尔未显示

Question

我使用 Vite 创建了一个 React 应用程序并安装了

Mantine v6.0.0

。当我调用以下函数打开 Mantine 模态时，视图变暗，但模态不可见。

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

Answer 1

事实证明，vite React 模板导入了一些默认样式（

index.css

），这导致模态框无法正确显示。一旦我删除了包含以下 css 属性的 css 导入，模式就可以正常工作了。

body {
  display: flex
}

Answer 2

这节省了我的时间，谢谢。

如果您在使用 Storybook 和 Mantine 时遇到同样的问题，请确保您的

parameters

对象中没有以下

meta

：

  parameters: {
    layout: "centered",
  },

根本原因是一样的，上面的参数将

display: flex

添加到iframe的body中。