如何更改 Chakra ui Toast 组件的位置

Question

我想把吐司不仅换到底部，还换到另一个盒子的底部

我尝试了门户，但我吐司门户没有进入框组件

这就是我尝试过的

import { Button, CloseButton, Flex, Image, Portal, useDisclosure, useToast } from "@chakra-ui/react";

const toast = useToast();
const toastTest = ()=>{
const toastRef = useRef<HTMLButtonElement>(null);
return(
<Portal containerRef={toastRef}>
    <Flex width={"300px"} height={"300px"}>
        <Button
            onClick={() => {
                toast();
            }}
        >
            Show Toast2
        </Button>
    </Flex>
</Portal>
<Flex width={"100%"} height={"1300px"} backgroundColor={"green.100"}>
        asdfsdzf
<Flex width={"100px"} height={"100px"} backgroundColor={"red.100"} ref={toastRef}></Flex>
</Flex>)}

Answer 1

在 Chakra UI 文档中，您可以找到更改 toast 位置的代码：

https://chakra-ui.com/docs/components/toast/usage#chang-the-toast-position

基本上你只需使用

toast

方法和 props，就像这样：

toast({
   position: 'top',
   title: 'Test Toast!',
   description: 'This is a test toast'
  })