NextJs 13 中的 Mantine 通知不会显示在右下角，并且始终全屏扩展

Question

我正在使用 NextJs 13.5.2 并且想要使用 Mantine 通知。我的layout.tsx 文件看起来像这样。

import "@mantine/core/styles.css";
import React from "react";
import { MantineProvider, ColorSchemeScript } from "@mantine/core";
import { Notifications } from "@mantine/notifications";
import { theme } from "../theme";
import { Header1 } from "@/components/header1/header1";

export const metadata = {
  title: "Test",
  description: "Test description",
};

export default function RootLayout({ children }: { children: any }) {
  return (
    <html lang="en">
      <head>
        <ColorSchemeScript />
        <link rel="shortcut icon" href="/favicon.svg" />
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
        />
      </head>
      <body>
        <MantineProvider theme={theme}>
          <Header1 />
          {children}
          <Notifications position="bottom-right" />
        </MantineProvider>
      </body>
    </html>
  );
}

我希望 Mantine 通知显示在屏幕的右下角，就像文档中的示例一样 https://mantine.dev/x/notifications/ 但是，当我使用

notifications.show({title: "Test",message: "Test",});

触发通知时，它看起来像这样：

Answer 1

导入'@mantine/notifications/styles.css';

:)

NextJs 13 中的 Mantine 通知不会显示在右下角，并且始终全屏扩展

问题描述投票：0回答：1

1个回答

最新问题

NextJs 13 中的 Mantine 通知不会显示在右下角，并且始终全屏扩展

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1