Overriding Mudblazor expansion panel's padding - css

Question

I'm new at Mudblazor and trying to override the default padding of the expansion panel header. Here is what the html looks like:
html mudblazor
Mudblazor creates a div with a .mud-expand-panel-header in the background and that's the element I want to change the bottom padding on. I tried inline css and change the styling from the css file without success. I also tried to use pb-1 on the TitleContent tag but that element doesn't take classes. Any ideas on how to change that?

Answer 1

Solution 1: How to apply custom CSS (directly)
If you wish to override the mud-expand-panel-header style directly, create a new CSS file, include it in the index.html file and make sure it's loaded after MudBlazor.min.css to ensure it takes a priority.
Once that's done, add the following code inside the new file:
.mud-expand-panel-header {
padding: 4px;
}
Solution 2: How to apply custom CSS (indirectly)
Instead of modifying mud-expand-panel-header class directly, apply the CSS you need to any mud-expand-panel-header that's inside an element with a custom CSS class of your own.
Example
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>
Solution 3: How to get Bootstrap working
If you wish for the pb-1 bootstrap class to work, go to the index.html file and make sure that bootstrap.min.css is loaded a̲f̲t̲e̲r̲ MudBlazor.min.css.
That's what you may currently have:
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
That's what you should have for the Bootstrap class to work:
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />