如何在Chakra UI Toast中添加链接及格式化文本？

当然可以，Chakra UI的Toast组件支持传入React节点作为标题或描述内容，这意味着你完全可以为Toast添加链接，或是对文本进行自定义格式化。以下是具体实现方式：

1. 在Toast中添加链接 #

利用Chakra UI的Link组件结合Next.js的NextLink（适配Next.js路由），将链接嵌入到Toast的description或title属性中即可：

import { useToast, Link } from '@chakra-ui/react';
import NextLink from 'next/link';

const ToastWithLink = () => {
  const toast = useToast();

  const triggerToast = () => {
    toast({
      title: '操作完成',
      description: (
        <>
          点击<Link as={NextLink} href="/history" color="blue.500" ml={1}>交易记录</Link>查看详情
        </>
      ),
      status: 'success',
      duration: 6000,
      isClosable: true,
    });
  };

  return <button onClick={triggerToast}>显示带链接的Toast</button>;
};

export default ToastWithLink;

2. 对Toast文本进行格式化 #

你可以使用Chakra UI的排版组件（如Bold、Italic、Text）或原生HTML标签，对Toast内的文本进行样式格式化：

import { useToast, Text, Bold, Italic } from '@chakra-ui/react';

const FormattedToast = () => {
  const toast = useToast();

  const triggerFormattedToast = () => {
    toast({
      title: (
        <Text>
          <Bold>警告</Bold>：存储空间不足
        </Text>
      ),
      description: (
        <>
          当前剩余空间<Italic>不足1GB</Italic>，请<Text color="red.500">清理冗余文件</Text>释放空间
        </>
      ),
      status: 'warning',
      duration: 5000,
      isClosable: true,
    });
  };

  return <button onClick={triggerFormattedToast}>显示格式化文本的Toast</button>;
};

export default FormattedToast;

注意事项 #

• 若使用Next.js的NextLink，需确保Link组件的as属性指向NextLink，以适配Next.js的路由机制
• 建议设置足够的duration值，让用户有时间点击链接或阅读格式化后的内容
• 自定义内容时尽量沿用Chakra UI的主题色和样式，保持整体UI风格统一

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