FluentUI 对话框和 FluentStack 未水平显示

Question

我对 Blazor 和 FluentUI 非常陌生（对 Desktop 和 WPF 更加熟悉）。例如，我正在使用 FluentUI 组件尝试设计登录对话框。对话框正确打开，但对话框的各个元素垂直显示而不是水平显示：

我创建对话框的相关代码是：

DialogParameters dialogParameters = new()
{
    Title = "Login to Site",
    PrimaryAction = "Ok",
    PrimaryActionEnabled = true,
    SecondaryAction = "Cancel",
    SecondaryActionEnabled = true,
    PreventDismissOnOverlayClick = true,
    Width = "500px",
    TrapFocus = true,
    Modal = true,
    PreventScroll = true
};

IDialogReference loginDialog = await DialogService.ShowDialogAsync<LoginDialog>(LoginRequest, dialogParameters);
DialogResult? result = await loginDialog.Result;

我的 LoginDialog.razor 组件是：

implements IDialogContentComponent<LoginRequest>

<!--<FluentDialogHeader ShowDismiss="true">
    <FluentStack VerticalAlignment="VerticalAlignment.Center" Orientation="Orientation.Horizontal">
        <FluentIcon Value="@(new Icons.Regular.Size24.WindowFingerprint())" />
        <FluentLabel Typo="Typography.PaneHeader">
            @Dialog.Instance.Parameters.Title
        </FluentLabel>
    </FluentStack>
</FluentDialogHeader>-->

<FluentDialogBody>
    <p>
        Welcome! Please enter your
        details below in order to login.
    </p>

    <FluentTextField @bind-value="@Content.UserName">Username:</FluentTextField>
    <FluentTextField TextFieldType="TextFieldType.Password" @bind-value="@Content.Password">Password:</FluentTextField>
</FluentDialogBody>

@code {
    [Parameter] public LoginRequest Content { get; set; } = new(string.Empty, string.Empty);

    [CascadingParameter] FluentDialog Dialog { get; set; } = default!;
}

无论我是否取消注释自定义标头的代码，也无论我是否包含“Orientation=”Orientation.Horizontal””，我都会得到完全相同的结果。对话框功能很棒，但“X”和“登录站点”是垂直堆叠而不是水平堆叠。

如果我尝试使用 FluentLayout 在 MainLayout.razor 中创建标头，也会发生同样的情况 - 标头项目是垂直堆叠而不是水平堆叠。

我只能想到这是某种 CSS 问题（这有点超出了我的熟悉范围）。我已经在 FluentUI 上完成了“入门”，但要么错过了一些内容，要么配置了错误。我曾经在同一个项目中安装过一些 SyncFusion 组件，后来删除了它们，但我确保删除了对 SF 主题的引用。

这是一个在 https 上运行并在 JB Rider 中使用 .NET 8 编译的 WebAssembly 项目。

Answer 1

在使用 Fluent UI 模板应用程序之后，我找到了导致此问题的一行。在index.html中，有一行：

<!-- If you add any scoped CSS files, uncomment the following to load them
    <link href="[projectname].styles.css" rel="stylesheet" />

我没有创建名为“[projectname].styles.css”的文件，因此没有再看一下这段代码。事实证明，取消注释该名称可以允许 FluentUI 依赖的重新启动主题。完全修复了！