Uso de los props en los componentes de Laravel para establecer clases por defecto

Muchas veces necesitamos configurar un componente indicando una clase por defecto pero que la misma pueda ser personalizada al consumir el componente de Laravel, por ejemplo, un componente de carta, en el cual, por defecto usemos un color blanco para el fondo pero, al momento de seleccionar otro color de fondo, el de blanco no se emplee.

Y esto es precisamente un punto muy importante, evitar que se utilice el color de fondo en blanco y no el especificado al momento de consumir el componente, especificamente estamos hablando de clases de tailwind, ya que, cargar ambos al mismo tiempo traerá el problema de que uno de ellos sobrescribirá al otro dependiendo en que parte de la hoja de estilo se este empleando; para evitar esto, podemos emplear los props a nivel de los componentes, dando un valor por defecto:

@props(['id' => null, 'bg' => 'bg-white'])

Y desde el componente, lo inyectamos de la siguiente manera:

@props(['id' => null, 'bg' => 'bg-white'])

@isset($logo)
    <div>
        {{ $logo }}
    </div>
@endisset

<div {!! $attributes->merge(['class' => 'w-full mt-2 '. $bg .' shadow-md overflow-hidden']) !!}>

    @isset($extra)
        <div class="border-b border-gray-200">
            {{ $extra }}
        </div>
    @endisset

    @isset($title)
        <div class="border-b border-gray-200">
            <div class="px-3 pb-1 pt-2">
                {{ $title }}
            </div>
        </div>
    @endisset

    <div class="px-3 py-2">
        {{ $slot }}
    </div>

</div>

Luego, al momento de emplear el componente anterior, que se llama card.blade.php, si queremos utilizar el color que trae por defecto la carta, que sería el color de blanco:

<x-card class="mb-10">
   content
</x-card>

O si queremos seleccionar otro color de fondo, por ejemplo, un morado:

<x-card class="mb-10" bg="bg-purple-300">
   content
</x-card>

Y de esta forma tan facil, podemos utilizar estos mismos pasos a cualquier otra clase que no necesariamente tiene que ser de color de fondo con los componentes en Laravel.

Componentes

PHP

Laravel

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy