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>

如何控制 MudSelect 的宽度？我想小很多适合选项宽度的大小。
为什么MudSelect和MudTextField里面的两条线不对齐？

查看此代码演示： https://try.mudblazor.com/snippet/cOcGYbcXyjfvdMjQ

Answer 1

如何控制 MudSelect 的宽度： 这里有几个选项。您可以在 MudSelect 周围添加一个容器元素并通过 CSS（例如 max-width: 150px）控制该元素的宽度，或者您可以在MudSelect 本身，例如 flex class Class="flex-grow-0"，这将阻止 select 增长。
为什么底部边框未对齐 - 您通过 Class="mt-0" 将文本输入的边距顶部设置为零。如果删除它，底部边框将对齐。

MudTable 中工具栏内控件的样式

Styling of controls inside Toolbar in MudTable

blazor

mudblazor