Chakra UI中如何创建自定义位置Toast并解决不显示问题

问题根源 #

每个通过createToaster()创建的自定义Toaster实例，都需要绑定一个对应的<Toaster/>组件作为渲染容器。你之前只引入了全局默认的<Toaster/>，自定义Toaster实例没有对应的渲染载体，所以调用后不会显示提示。

两种解决方案 #

方案1：给自定义Toaster绑定专属渲染容器

1. 先创建并导出自定义Toaster实例：

import { createToaster } from "@chakra-ui/react";

// 创建配置好位置的自定义Toaster
export const customToaster = createToaster({ placement: "top-end" });

2. 在根组件（比如App.js）中添加对应这个实例的<Toaster/>组件：

import { Toaster } from "@chakra-ui/react";
import { customToaster } from "./your-path-to-toaster";

function App() {
  return (
    <div>
      {/* 保留默认Toaster的渲染容器（如果还需要使用默认Toaster的话） */}
      <Toaster />
      {/* 为自定义Toaster绑定渲染容器 */}
      <Toaster toaster={customToaster} />
    </div>
  );
}

3. 调用自定义Toaster的方法即可显示提示：

import { customToaster } from "./your-path-to-toaster";

// 在需要的地方调用
customToaster.success("自定义位置的成功提示");

方案2：直接修改全局默认Toaster的配置

如果你只是想修改全局所有Toast的默认位置，不需要创建新的Toaster实例，直接在全局的<Toaster/>上设置placement属性即可：

// 根组件中
<Toaster placement="top-end" />

之后直接使用默认的useToast()钩子调用，所有提示都会使用这个配置：

import { useToast } from "@chakra-ui/react";

function YourComponent() {
  const toast = useToast();
  
  const showToast = () => {
    toast.success("默认位置已改为top-end的提示");
  };
  
  return <button onClick={showToast}>显示提示</button>;
}

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