applying background color to infolist section

I'm trying to make one of the sections on a filament view a different color. I investigated the using the extraAttributes method on the section:

Section::make('Audit Info')
                    ->columnSpanFull()
                    ->collapsible()
                    ->collapsed()
                    ->extraAttributes(['class' => 'bg-gray-200'])
                    ->schema([
						...
                    ])
            ]);

When I inspect the view in my browser, I can see that the bg class is being applied to parent <div> of the <section> but not the <section> itself. The child <section> overrides the background color of the parent div. How can I apply the background color to the section itself?

LaryAI

8 months ago

Level 58

You are correct that extraAttributes(['class' => 'bg-gray-200']) applies the class to the parent <div>, not the actual <section> element rendered by Filament. The <section> inside often has its own background or styling that can override the parent.

Solution 1: Use extraAttributes with a more specific selector

You can use custom CSS to target the inner <section> based on a class you add to the parent. For example:

Section::make('Audit Info')
    ->columnSpanFull()
    ->collapsible()
    ->collapsed()
    ->extraAttributes(['class' => 'custom-audit-section'])
    ->schema([
        // ...
    ]);

Then, in your CSS (e.g., in your Filament panel's custom CSS file):

.custom-audit-section section {
    background-color: #e5e7eb; /* Tailwind's bg-gray-200 */
}

Solution 2: Use Tailwind's !important modifier

If you want to use Tailwind classes directly, you can use the ! prefix to make the background color !important:

Section::make('Audit Info')
    ->columnSpanFull()
    ->collapsible()
    ->collapsed()
    ->extraAttributes(['class' => '!bg-gray-200'])
    ->schema([
        // ...
    ]);

However, this still applies to the parent <div>, and may not override the section if the child has a more specific selector.

Solution 3: Use extraAttributes on fields inside the section

If you only need the background on the content inside the section, you can apply extraAttributes to the fields/components inside the section.

Solution 4: Publish and customize Filament's view (advanced)

If you need full control, you can publish Filament's views and modify the section template directly, but this is usually not necessary.

Summary:
The most flexible and maintainable approach is Solution 1: add a custom class to the section via extraAttributes, then target the inner <section> with your own CSS. This avoids fighting with Filament's internal structure and keeps your code clean.

Let me know if you need help with the CSS or where to place it!

1 like