Filament•5w ago

Blade components modifications problem

I am using the badge component, and I would like to remove the border. I checked the component and found that the ring-1 class from Tailwind is responsible for the border. I tried adding class="ring-0" outside the component, but it still doesn't overwrite the default class. Am I missing something, or why isn't it overriding the default class? This is how I am using the component:

<x-filament::badge
    class="ring-0"
    style="display: inline-block;
            max-width: 150px;
            background-color: {{ $darkenedBackgroundWithOpacity }};
            color: {{ $attributeOption->color_code }};">
    {{ __($attributeOption->value) }}
</x-filament::badge>

<x-filament::badge
    class="ring-0"
    style="display: inline-block;
            max-width: 150px;
            background-color: {{ $darkenedBackgroundWithOpacity }};
            color: {{ $attributeOption->color_code }};">
    {{ __($attributeOption->value) }}
</x-filament::badge>

I checked the browser's inspection tool, and both classes are defined on the tag.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Blade components modifications problem