Filament•10mo ago

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

2 Replies

Melchior•10mo ago

Use the default button:

Melchior•10mo ago

https://filamentphp.com/docs/3.x/support/blade-components/button

Button Blade component - Core Concepts - Filament

Gaming

Programming

Custom style for component