Override classes in filament blade components

Is there a proper way to override (not just merge) CSS classes of a Filament Blade component? For example:

<x-filament::button class="absolute top-0 right-0">
                    Test
                </x-filament::button>

<x-filament::button class="absolute top-0 right-0">
                    Test
                </x-filament::button>

In this case, my custom classes get merged, but default classes from the component still apply and take priority (e.g., padding, border radius). Is there an official way to replace them completely?

Solution:

I don't think so. Try using important in these cases. !top-0

Jump to solution

2 Replies

Solution

Dennis Koch•2mo ago

I don't think so. Try using important in these cases. !top-0

kasterOP•2mo ago

It works, thanks. I tried implementing a custom css class that uses !important, but I wasn't sure if there was a better way to do it.

Gaming

Programming

Override classes in filament blade components

Did you find this page helpful?