如何使用Blazored Toast设置自定义Toast位置？

当然可以实现更灵活的位置控制，Blazored Toast虽然提供了TopLeft、TopRight这类预定义位置选项，但通过以下两种方式能满足自定义需求：

方法一：覆盖默认CSS样式 #

Blazored Toast的定位完全由CSS类控制，你可以直接重写容器的样式属性来调整位置。比如默认的.blazored-toast-container类负责Toast容器的全局定位，你可以自定义它的position、top、left、transform等属性：

/* 示例：将Toast固定在页面底部居中位置 */
.blazored-toast-container.custom-toast-position {
    position: fixed;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: auto;
}

然后在初始化Toast组件时，添加这个自定义类：

<BlazoredToasts Class="custom-toast-position" />

如果需要针对不同类型的Toast（成功、提示、错误）设置不同位置，还可以结合类型专属类（比如.success-toast、.error-toast）做更细化的样式控制。

方法二：使用自定义Toast模板 #

如果需要极致的位置和样式控制，Blazored Toast支持自定义Toast模板，你可以完全掌控Toast的结构和定位逻辑：

<BlazoredToasts>
    <ToastTemplate>
        <div style="position: fixed; top: 50%; right: 2rem; transform: translateY(-50%); padding: 1.2rem; background: #ffffff; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); max-width: 320px;">
            <div class="toast-header">
                <strong class="mr-auto">@ToastMessage.Heading</strong>
                <button @onclick="() => ToastService.Remove(ToastMessage.Id)" class="close" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="toast-body mt-2">@ToastMessage.Message</div>
        </div>
    </ToastTemplate>
</BlazoredToasts>

这种方式下，你可以通过内联样式或自定义CSS类，将Toast定位到任意位置，甚至能根据Toast的类型动态切换样式规则。注意要保留ToastService.Remove的调用逻辑，确保Toast可以正常关闭。

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