Fluent UI Blazor组件：设置FluentProgress进度条高度

Fluent UI的FluentProgress组件确实没有提供直接调整进度条粗细的内置参数，你可以通过自定义CSS来修改它的高度，从而实现加粗效果，具体方法如下：

方法1：内联样式快速调整 #

直接给FluentProgress设置高度，并通过插槽选择器让进度条的填充部分占满整个高度：

<h4>加粗后的进度条</h4>
<div style="width: 300px; display: grid; grid-gap: 12px; grid-auto-flow: column;">
    <FluentProgress Min="0" Max="100" Value="75" style="height: 12px;">
        <style>
            ::slotted([slot="bar"]) {
                height: 100%;
            }
        </style>
    </FluentProgress>
</div>

你可以根据需求修改style里的height值（比如16px、20px），数值越大进度条越粗。

方法2：定义CSS类复用样式 #

如果需要在多个地方使用加粗的进度条，建议定义CSS类：

.thick-progress {
    height: 16px;
}

.thick-progress ::slotted([slot="bar"]) {
    height: 100%;
}

使用时直接给组件添加类名即可：

<FluentProgress Min="0" Max="100" Value="75" class="thick-progress"></FluentProgress>

原理说明 #

FluentProgress的进度填充部分是通过slot="bar"的内部元素实现的，默认有固定高度。通过::slotted选择器可以穿透组件的Shadow DOM，修改内部插槽元素的样式，让它继承外层设置的高度，从而实现加粗效果。

内容的提问来源于stack exchange，提问作者Ogglas