在Blazor中使用Bootstrap轮播时，我可以像下面这样为轮播项添加说明文字和一个下载按钮

<div class="carousel-item active" >
   <img src="https://cdn...myImage.webp" class="d-block w-100" alt="alt text">
   <div class="carousel-caption d-none d-md-block">
      <h5>A caption goes here</h5>
      <NavLink class="nav-link" href="download">Download</NavLink>
    </div>
</div>

在MudBlazor中，MudCarouselItem看起来是这样的

<MudCarouselItem>
   <div class="d-flex" style="height:max-content">
      <MudImage Src="https://cdn...myImage.webp" Alt="alt text" />
      <h5>A caption goes here</h5>
   </div>
</MudCarouselItem>
...

如果我添加MudButton，它不会显示。说明文字会和图片并排显示。

我也尝试过调整z-index没有成功。此外，我还看到一些关于在MudBlazor中将文本覆盖在图片之上的问题，这通常涉及创建自定义样式类。这对于一个常见功能来说似乎有点麻烦。

是否有一种简单的声明式方法，可以向MudCarouselItem添加文本和按钮？

解决方案

它们确实被渲染出来了，但你的样式在起作用，影响了它们。

你示例中的第一个元素 <div class="d-flex" style="height:max-content"> 是一个带有 height:max-content 的flexbox，但这个div的父元素是 MudCarouselItem，它有一个 display:block，并在 MudCarousel 中设置了高度；在固定高度的情况下，最好使用 height:100%。

至于按钮没有显示，我认为你可能存在一些重叠的样式，单从提问中的代码很难判断。

这里有一个示例。

MudBlazor演示

<MudCarousel Class="mud-width-full" Style="height:300px;" ShowArrows="@arrows" ShowBullets="@bullets" EnableSwipeGesture="@enableSwipeGesture" AutoCycle="@autocycle" TData="object">
    <MudCarouselItem Transition="transition" Color="@Color.Primary">
        <div class="d-flex flex-column align-center justify-center" style="height:100%">
            <MudImage Src="images/mony.jpg" Alt="Mony the dog" Elevation="25" Class="rounded-lg"/>
            <h5>A caption goes here</h5>
            <MudButton Variant="Variant.Filled" Color="Color.Secondary">Secondary</MudButton>
        </div>
    </MudCarouselItem>

如果组件文档中的API显示如下。

那么放在该组件内的任何元素/组件（在本例中是 MudCarouselItem）将按原样渲染，基本上把它当作一个 <div> 来使用，但会预先应用多种样式和属性。