merge attributes - how do I get them to function properly?

Question

i have the following in a component stored in resources/views/components/green-button.blade.php in laravel 8.

<button {{ $attributes->merge(['type' => 'button', 'class' => 'px-4 inline-flex justify-center py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500']) }}>
    {{ $slot }}
</button>

I use it :

<x-green-button class="px-0"
                title="Click to show or hide data entry for {{$person->firstname}}."
                wire:click="toggleVisibility({{$person->id}})">
  <h3 class="my-1">{{$person->FullName_fh}}</h3>
</x-green-button>

The component has an x axis padding of px-4. I pass px-0, but there is no effect. What am I doing wrong?

rbd

score 2 · Accepted Answer · answered Nov 18 '21 at 22:15

2

You can use @props() to achieve the goal.

// In your component

@props(['customClass' => ''])

<button {{ $attributes->merge([
    'type'  => 'button', 
    'class' => 'all-your-classes ' . $customClass
]) }}>
    {{ $slot }}
</button>

// In your blade file

<x-green-button customClass="px-0">
    {{ $person->FullName_fh }}
</x-green-button>

answered Nov 18 '21 at 22:15

Samuel Ferdary

315
2
11

hi, thx. if the 'all-your-classes' has 'px-4' in it, and $customClass = 'px-0', will the px-4 take precedence because it comes first?, or does the last contradicting class take precedence? Thx S. – Robert Bryan Davis Nov 18 '21 at 22:52
@RobertBryanDavis It depends on the stylesheet order, See: https://stackoverflow.com/a/3066365/13916713 – Samuel Ferdary Dec 16 '21 at 14:21
Hi, thx for the feedback. I gained the funcctionality i was seeking by using props() and passing in adjustments to styles that way. – Robert Bryan Davis Dec 17 '21 at 15:40

score 1 · Answer 2 · answered Mar 28 '23 at 00:25

We can achieve the functionality as @Samuel Ferdary explained.

But I found this article useful: Override class attributes in Blade component

Summary:

As of Tailwind CSS 3+, you can override existing class selectors by prepending the important operator:

<div {{ $attributes->merge(['class' => 'bg-red-500']) }}> 
  {{ $slot }}
</div>

<x-component class="text-gray-700 !bg-blue-500">
  {{ $slot }}
</x-component>

merge attributes - how do I get them to function properly?

2 Answers2