请教大佬 FluentUI Toast 不显示的问题

[hertzry]

官方文档

小弟不是专业做网页的，让 AI 用 React 做了个页面，本来一切都挺顺利，但是想用 Toast 组件，死活显示不出来。

我以为被什么东西挡住了，结果开一个空页面粘贴文档的代码都不显示，AI 也修不好，F12 也没有报错，但是进微软的那个 sandbox 就可以，到底是哪里出问题呢？折磨一天了没弄出来。是不是有什么细节没注意到，请老哥们赐教🙏

浏览器是 EDGE 最新版，React 是 v18 ，FluentUI 是 v9 。

[JoeJoeJoe]

不贴代码怎么看啊😂

干啥不都得有个上下文?

[hertzry]

@JoeJoeJoe 你就试试文档的代码吧，那个俺都弄不出来。

[jroger]

大概率是你没有在根节点下放一个接收 toast 的容器，只用了 toast 组件。仔细看一下文档，我用的版本和你的一样，就没有问题。

[hertzry]

@jroger 感谢测试，我放在了 FluentProvider 里，难道是这个不对吗？

[hertzry]

@jroger 就是这样显示不了。
...
dispatchToast(
<Toast>
<ToastTitle>Example data loaded</ToastTitle>
</Toast>,
{intent: "success", position: "top-end"}
);
...
return (
<FluentProvider theme={isDark ? darkTheme : lightTheme} applyStylesToPortals>
<Toaster toasterId={toasterId} />
...
假如我直接
return (
<FluentProvider theme={isDark ? darkTheme : lightTheme} applyStylesToPortals>
<Toast intent: "success", position: "top-end">
<ToastTitle>Example data loaded</ToastTitle>
</Toast>
就能显示， 我理解的是 dispatchToast 没有起作用。

[hertzry]

把 nextjs 换成 vite 就好了，不知道其中缘由。