NextJs 13.5.2中Mantine Notification无法居右下且全屏显示问题

你的问题核心是缺少Notifications组件的专属样式文件，导致组件无法正确渲染定位样式。按以下步骤修复：

1. 补充导入Notifications样式 #

在layout.tsx顶部添加Notifications的样式导入：

import "@mantine/core/styles.css";
import "@mantine/notifications/styles.css"; // 新增这行

2. 验证组件结构 #

确认Notifications组件在MantineProvider内部，你的代码已经满足这一点，额外检查：

• Notifications的position="bottom-right"属性设置正确
• 没有自定义全局样式（比如body/html的强制宽高设置）干扰组件定位

完成修改后重启项目，调用notifications.show({title: "Test",message: "Test",})就能看到通知正常显示在屏幕右下角。

内容的提问来源于stack exchange，提问作者Franz