如何修改Chakra UI Toast组件位置？使其定位到指定容器底部

原代码的核心问题 #

• useToast的调用没指定挂载容器，默认会挂到document.body，完全没用到你设置的目标容器
• toastRef类型写错了：目标容器是Flex组件（对应DOM是div），应该用HTMLDivElement而非HTMLButtonElement
• Portal用错了场景：你把触发按钮放进了Portal，这完全没必要，Portal是用来转移Toast的挂载位置，不是按钮

正确实现代码 #

import { Button, Flex, useRef, useToast } from "@chakra-ui/react";

const ToastTest = () => {
  const toast = useToast();
  // 目标容器的ref，类型匹配Flex对应的div元素
  const targetContainerRef = useRef<HTMLDivElement>(null);

  const showToast = () => {
    toast({
      title: "操作提示",
      description: "这是挂载到指定容器底部的Toast",
      duration: 3000,
      isClosable: true,
      // 指定Toast挂载到目标容器内部
      container: targetContainerRef.current,
      // 设置Toast相对于容器的位置为底部
      position: "bottom",
      // 让Toast贴合容器宽度，可自定义
      width: "100%"
    });
  };

  return (
    <>
      <Button onClick={showToast}>显示Toast</Button>
      <Flex width={"100%"} height={"1300px"} backgroundColor={"green.100"}>
        页面主体内容
        {/* 目标容器：Toast会挂载到这个容器内部的底部 */}
        <Flex 
          ref={targetContainerRef}
          width={"300px"} 
          height={"200px"} 
          backgroundColor={"red.100"}
          // 必须设为相对定位，否则Toast的bottom会相对于整个视口
          position="relative"
        >
          目标容器区域
        </Flex>
      </Flex>
    </>
  );
};

export default ToastTest;

关键细节说明 #

1. 目标容器必须设position="relative"：否则Toast的position:bottom会相对于整个页面视口，而非这个容器
2. 通过container参数指定挂载目标：Chakra的useToast已经内置了容器配置，不需要手动套Portal，直接传入目标容器的ref即可
3. 自定义Toast样式：可以通过width、bg等参数调整Toast的外观，让它和目标容器适配

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