如何为Filament表格汇总器（Summaries）及其输出添加颜色以突出显示？

嘿，这个需求太贴合实际了——重要的金额信息就得显眼！我来给你分享两种简单直接的实现方式，不用跳去别的网站，直接在你现有的代码基础上修改就行：

方法一：自定义标签+格式化结果（基础款） #

直接在Sum实例上修改标签样式和结果的显示格式，用Filament原生支持的HTML渲染就行：

TextColumn::make('price')
    ->summarize(
        Sum::make()
            // 给默认的"Sum"标签换成带颜色的自定义文本，这里用红色加粗
            ->label(function () {
                return '<span class="text-red-600 font-bold">总金额</span>';
            })
            // 必须开启HTML支持，不然标签会显示成纯文本
            ->html()
            // 给汇总结果加上颜色，这里用绿色加粗，还可以格式化数字保留两位小数
            ->formatStateUsing(function (string $state) {
                return '<span class="text-green-600 font-bold">' . number_format($state, 2) . '</span>';
            })
    )

你可以根据自己的需求换颜色类，比如text-blue-500（蓝色）、text-yellow-600（黄色）这些，都是Filament内置支持的颜色类，不用额外写CSS。

方法二：用Filament徽章组件（醒目款） #

如果想让结果更突出，直接用Filament自带的徽章组件，自带主题色，样式更统一：

TextColumn::make('price')
    ->summarize(
        Sum::make()
            // 同样自定义带颜色的标签
            ->label('<span class="font-bold text-red-600">总金额</span>')
            ->html()
            // 用Filament的徽章包裹结果，选个合适的主题色
            ->formatStateUsing(function (string $state) {
                return Blade::render('<x-filament::badge color="success" class="font-bold">{{ $state }}</x-filament::badge>', ['state' => number_format($state, 2)]);
            })
    )

这里的color="success"对应绿色，你也可以换成danger（红色）、warning（黄色）、primary（蓝色）这些Filament的主题色，徽章自带圆角和内边距，视觉上更醒目。

小提醒 #

不管用哪种方法，都要记得在Sum实例上调用->html()方法，不然HTML代码会被转义成纯文本，颜色样式就不生效啦！

备注：内容来源于stack exchange，提问作者Billal BEGUERADJ