合并属性的-我怎么让他们功能是否正确？

Question 1

我有以下的一个组成部分存在resources/views/components/green-button.blade.php 在laravel8.

<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>

我使用它：

<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>

组件有一个x轴填充的px-4. 我通过px-0，但是没有效果。我做错了什么？

精炼

Question 2

你可以使用 @props() 要实现这一目标。

// 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>

Samuel Ferdary · Answer 1 · 2021-11-18T22:15:11

你可以使用 @props() 要实现这一目标。

// 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>

嗨,thx. 如果所有-你的班'具有'px-4'，和$customClass='px-0'，将px-4优先，因为它是第一位?, 或者最后一个矛盾的类优先? 谢谢S.
@RobertBryanDavis取决于它的样式表顺序，见： stackoverflow.com/a/3066365/13916713
嗨，谢谢的反馈意见。我获得了funcctionality我正在寻求通过使用道具()并通过在调整格式的方式。

合并属性的-我怎么让他们功能是否正确？

的问题

最好的答案

其他语言

此页面有其他语言版本

受欢迎的此类别

流行的问题，在这个类别