blazor - MudTable 中工具栏内的控件样式

Question

我正在尝试在MudTable具有多个过滤器控件的内部布局工具栏。

<MudTable Items="@Elements" Hover>
    <ToolBarContent>
        <MudText Typo="Typo.h6">Periodic Elements</MudText>
        <MudSpacer />
        <MudSelect Dense="true" T="string" Label="Coffee" Variant="Variant.Text">
            <MudSelectItem Value="@("Tyrannosaur")" />
            <MudSelectItem Value="@("Triceratops")" />
            <MudSelectItem Value="@("Mike Rex")" />
        </MudSelect>
        <MudTextField @bind-Value="searchString1" Placeholder="Search" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
    </ToolBarContent>
    ...
</MudTable>

1. 我怎样才能控制的宽度MudSelect？我想小很多，以适应选项的宽度大小。
2. 为什么里面的两条线MudSelect不MudTextField对齐？

请参阅此代码演示： https ://try.mudblazor.com/snippet/cOcGYbcXyjfvdMjQ

Answer 1

1. 如何控制 MudSelect 的宽度：这里有几个选项。您可以在 周围添加一个容器元素MudSelect并通过 CSS（例如）控制该元素的宽度，max-width: 150px或者您可以在 MudSelect 本身上使用 Mud 的大小调整类之一，例如 flex 类Class="flex-grow-0"，这将阻止选择增长。
2. 为什么底部边框不对齐- 您在通过Class="mt-0". 如果删除它，底部边框将对齐。