如何定位 antd 通知 - 我希望它居中

Question

我正在使用这个

export function notificationWithIcon(type, title, description, placement) {
  notification[type]({
    message: title,
    description: description,
    placement
  });
}

然而，唯一的选择是topRight, bottomRight, bottomLeft or topLeft

我希望它显示在屏幕中央。有什么办法可以实现吗

编辑：我采用了 Majid 的想法，这就是现在的样子。它仍然位于右侧

Answer 1

基于documentations：

A notification box can appear from the topRight, bottomRight, bottomLeft or topLeft of the viewport.

但您可以使用 css classes:

自行定制

.ant-notification-center {
  left: 50%;
  bottom: 50% !important;
  margin-right: 30%;
  transform: translate(-50%, -50%);
}

并使用与以下示例相同的 notification：

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Button, notification, Space } from "antd";
import { RadiusUpleftOutlined } from "@ant-design/icons";

const openNotification = (placement) => {
  notification.info({
    message: `Notification ${placement}`,
    duration: 10000,
    description:
      "This is the content of the notification. This is the content of the notification. This is the content of the notification.",
    placement
  });
};

ReactDOM.render(
  <div>
    <Space>
      <Button type="primary" onClick={() => openNotification("center")}>
        <RadiusUpleftOutlined />
        center
      </Button>
    </Space>
  </div>,
  document.getElementById("container")
);

如何定位 antd 通知 - 我希望它居中

How to position antd notification - i want it to be centered

javascript

css

reactjs

antd