Change CSS file when component change

I am having one page component which having 3 child component running inside this page component. I want to change the css/scss file when the two child component change. The problem which i am facing here that when the default component load then the first works very perfectly but when the second component come then its not changing the first css.

My template already having stacks and this stack exist in the blade where page component loads.

My code is like this

Page component

<?php

namespace App\Http\Livewire\Frontend\Page\Sharedbooking;

use Livewire\Component;

class Page extends Component
{
    public $display;
    public $shared;
    public $booking_form_data;
    public $cssfiles;
    
    protected $listeners = [
        'displayLayout',
        'bookingForm'

    ];

    public function mount()
    {
        $this->fill([
            'display' => 'detail',
            'cssfiles' => 'resources/css/page/products/products-detail.scss'
        ]);


    }
    /**
     * booking form
     */
    public function displayLayout($type)
    {
        switch($type)
        {
            case 'customer':
                $this->display = 'customer';
                $this->cssfiles = 'resources/css/page/reservation/details2.scss';
                break;
            case 'payment':
                $this->display = 'payment';
                break;
        }

    }
    /**
     * collect the booking form data
     */
    public function bookingForm($formData)
    {

        $this->booking_form_data = $formData;

        //dd($this->booking_form_data);

    }

    public function render()
    {
        return view('livewire.frontend.page.sharedbooking.page');
    }
}

Page blade

<div>
    {{ $cssfiles }}
    {{--  page level component for shared booking --}}
    @if($display == "detail") 
    @livewire('frontend.page.sharedbooking.detail',['shared'=>$shared])
    @elseif($display == "customer")
    @livewire('frontend.page.sharedbooking.customer',['shared'=>$shared,'formdata' => $booking_form_data])
    @elseif($display == "payment")
    @livewire('frontend.page.sharedbooking.payment')
    @endif
     {{--  page level component for shared booking --}}
</div>
@push('customcss')
@vite([
    $cssfiles
])

@endpush

LaryAI

3 years ago

Level 58

You can use the @push directive in your blade file to add the css file to the page. You can also use the @livewireScripts directive to add the css file to the page.

In your Page component, you can add a $cssfiles variable and set it to the css file you want to use. Then, in your blade file, you can use the @push directive to add the css file to the page.

public $cssfiles;

public function mount()
{
    $this-&gt;fill([
        'display' => 'detail',
        'cssfiles' => 'resources/css/page/products/products-detail.scss'
    ]);
}

public function displayLayout($type)
{
    switch($type)
    {
        case 'customer':
            $this-&gt;display = 'customer';
            $this-&gt;cssfiles = 'resources/css/page/reservation/details2.scss';
            break;
        case 'payment':
            $this-&gt;display = 'payment';
            break;
    }

}

@push('customcss')
@vite([
    $cssfiles
])

@endpush

webrobert

3 years ago

Level 51

seems like overkill. Why do you need to omit css for each view?

wontonesaju

3 years ago

Level 1

@webrobert not overkill its a different css for that component. if you are having a big application website its always wise to create one main style and rest sub style based on the main components. Its easy for front end designer also. (Main style and sub styles)

Please or to participate in this conversation.