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的宽度？我想要小得多，与选项宽度的大小相吻合。

，

1. ，为什么MudSelect和MudTextField中的两条线没有对齐？

参见下面的代码演示：https://try.mudblazor.com/snippet/cOcGYbcXyjfvdMjQ

Answer 1

1. How来控制MudSelect的宽度：这里有几个选项。您可以在growing.
2. Why周围添加一个容器元素，并通过CSS (例如max-width: 150px)控制该元素的宽度，或者您可以在MudSelect本身上使用Mud的大小调整类之一，例如flex类Class="flex-grow-0"，这将防止从MudSelect中选择--底部边框没有对齐--在通过Class="mt-0"输入的文本上将边距设置为零。如果删除它，底部的边框将对齐。