【问题标题】：Overriding Mudblazor expansion panel's padding覆盖 Mudblazor 扩展面板的填充
【发布时间】：2022-08-15 03:33:04
【问题描述】：

我是 Mudblazor 的新手，并试图覆盖扩展面板标题的默认填充。这是 html 的样子： html mudblazor

Mudblazor 在背景中创建了一个带有.mud-expand-panel-header 的 div，这就是我要更改底部填充的元素。我尝试了内联 css 并更改了 css 文件的样式，但没有成功。我还尝试在TitleContent 标签上使用pb-1，但该元素不接受课程。关于如何改变它的任何想法？

标签： css blazor mudblazor

【解决方案1】：

解决方案 1：如何使用自己的类应用 CSS

无需直接修改 mud-expand-panel-header 类，而是将所需的 CSS 应用于具有您自己的自定义 CSS 类的元素内的任何 mud-expand-panel-header。

例子

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

<style>
    .custom-expansion-panel .mud-expand-panel-header {
        padding-bottom: 0px;
    }
</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>

解决方案 2：如何让 Bootstrap CSS 工作

如果您希望pb-1 引导类工作，请转到index.html 文件并确保bootstrap.min.css 已加载a̲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" />

【讨论】：