F
Filament•13mo ago
DianaMujoiu

Custom style for component

I've created a component by following the documentation provided here: https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component. Below is my component: 
<?php
namespace App\Livewire\Client;

use Filament\Forms\Components\Radio;
use Filament\Forms\Components\Repeater;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Wizard;
use Filament\Forms\Components\Wizard\Step;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Livewire\Attributes\Layout;
use Livewire\Component;
class DataAndConsumption extends Component implements HasForms
{
    use InteractsWithForms
    protected function form(Form $form): Form
    {
        return $form
        ->schema([
            Wizard::make([
                Step::make('Date societate')
                    ->icon('heroicon-o-building-office-2')
                    ->schema((new \App\Filament\Client\Resources\CompanyDataResource)->inputForm()),
                Step::make('Puncte de lucru')
                    ->icon('heroicon-o-map-pin')
                    ->schema((new \App\Filament\Client\Resources\WorkPointResource())->inputForm()),
            ])->skippable(),
        ]);

    }
}
<?php
namespace App\Livewire\Client;

use Filament\Forms\Components\Radio;
use Filament\Forms\Components\Repeater;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Wizard;
use Filament\Forms\Components\Wizard\Step;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Livewire\Attributes\Layout;
use Livewire\Component;
class DataAndConsumption extends Component implements HasForms
{
    use InteractsWithForms
    protected function form(Form $form): Form
    {
        return $form
        ->schema([
            Wizard::make([
                Step::make('Date societate')
                    ->icon('heroicon-o-building-office-2')
                    ->schema((new \App\Filament\Client\Resources\CompanyDataResource)->inputForm()),
                Step::make('Puncte de lucru')
                    ->icon('heroicon-o-map-pin')
                    ->schema((new \App\Filament\Client\Resources\WorkPointResource())->inputForm()),
            ])->skippable(),
        ]);

    }
}
and I have this in my blade 
    <div class="register-page min-h-screen flex items-center justify-center p-4">
        <x-filament::card>
        <form wire:submit="submit">
            {{ $this->form }}
            <button type="submit" class="btn btn-primary mt-3">
                Submit
            </button>
        </form>
            <x-filament-actions::modals />
        </x-filament::card>
    </div>
    <div class="register-page min-h-screen flex items-center justify-center p-4">
        <x-filament::card>
        <form wire:submit="submit">
            {{ $this->form }}
            <button type="submit" class="btn btn-primary mt-3">
                Submit
            </button>
        </form>
            <x-filament-actions::modals />
        </x-filament::card>
    </div>
I am encountering an issue where the wizard component is displayed in dark mode, and the 'next' button lacks the intended styling. How can I ensure the wizard is displayed in light mode and apply the necessary styles?
Installation - Panel Builder - Filament
No description
2 Replies
Melchior
Melchior•13mo ago
Use the default button:
Melchior
Melchior•13mo ago

Did you find this page helpful?