覆盖Mudblazor扩展面板的填充

Question

我是在Mudblazor新来的，并试图覆盖扩展面板头的默认填充。下面是html的样子：html泥巴罗尔

Mudblazor在后台创建一个带有.mud-expand-panel-header的div，这就是我想要更改底部填充的元素。我尝试了内联css并从css文件中更改样式，但没有成功。我还试图在pb-1标记上使用TitleContent，但该元素不接受类。对如何改变这种状况有什么想法吗？

Answer 1

解决方案1:如何(直接)应用自定义CSS

如果希望直接覆盖mud-expand-panel-header样式，请创建一个新的CSS文件，将其包括在index.html文件中，并确保它在MudBlazor.min.css之后加载，以确保它具有优先级。

完成后，在新文件中添加以下代码：

.mud-expand-panel-header {
    padding: 4px;
}

解决方案2:如何(间接)应用自定义CSS

与其直接修改mud-expand-panel-header类，不如将所需的CSS应用到元素中的任何mud-expand-panel-header中，并使用您自己的自定义CSS类。

示例

https://try.mudblazor.com/snippet/wumGaiveVFPlBBEe

<style>
    .custom-expansion-panel .mud-expand-panel-header {
        padding-bottom: 4px;
    }
</style>

<MudExpansionPanel Class="custom-expansion-panel">
    <TitleContent>
        <div class="d-flex">
            <MudIcon Icon="@Icons.Filled.CheckCircleOutline" Color="Color.Tertiary" class="mr-3"></MudIcon>
            <MudText>Title</MudText>
        </div>
        <MudText Typo="Typo.subtitle1"><b>Price</b></MudText>
    </TitleContent>
    <ChildContent>
        <MudText>Age</MudText>
        <MudText Typo="Typo.body2">Notes</MudText>
    </ChildContent>
</MudExpansionPanel>

解决方案3:如何使引导带工作

如果希望pb-1引导类工作，请转到index.html文件，并确保加载了̲f̲t̲e̲r̲MudBlazor.min.css。

这就是你目前可能拥有的：

<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />

这就是Bootstrap类应该具备的工作条件：

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />