Add custom styles to Filament-From in Livewire component

Hi, I'm trying to use the filament form builder in a livewire component with custom styling. Therefore i followed the instructions from the docs: https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component

By default the components get the css classes from filament (fi-... and other tailwind classes). I want to avoid them and use the styles from daisyUI which are used in the rest of the application.

However i can't get them to work properly. I added the styles with ->extraInputAttributes(['class' => 'input input-bordered']) (see below) which works more or less, but clashes with the filament styling. I thought of publishing the filament blade files from the vendor folder and remove the defined css-classes there.

Is there a proper way of styling the form in a Livewire component?

<?php

namespace App\Livewire;

use Filament\Forms\Components\TextInput;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Livewire\Component;

class FormTest extends Component implements HasForms
{
    use InteractsWithForms;

    public ?array $data = [];

    public function mount(): void
    {
        $this->form->fill();
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('email')
                    ->email()
                    ->required()
                    ->extraInputAttributes(['class' => 'input input-bordered']),
            ])
            ->columns(2)
            ->statePath('data');
    }

    public function submit(): void
    {
        dd($this->form->getState());

        $this->form->fill();
    }

    public function render()
    {
        return view('livewire.form-test');
    }
}

LaryAI

2 years ago

Level 58

To customize the styles of your Filament form to use DaisyUI classes instead of the default Filament/Tailwind classes, you can indeed use the extraInputAttributes method to add your custom classes. However, if you find that the default Filament classes are still being applied and are clashing with your custom styles, you may need to take additional steps to ensure your styles take precedence.

Here's a step-by-step solution to ensure your custom styles are applied:

Override Filament Styles: You can create a custom CSS file where you override the default Filament styles with your DaisyUI styles. Include this CSS file in your Livewire component's view.
Publish Filament Views: If you need more control over the markup, you can publish the Filament views to your resources folder and edit them directly. Run the following command to publish the views:

php artisan vendor:publish --tag=filament-views

After publishing, you can find the views in the resources/views/vendor/filament directory. You can then modify the Blade files to use your custom classes.

Use extraInputAttributes: Continue using the extraInputAttributes method to add or override classes for individual form components.
Remove Default Filament Classes: If you want to completely remove the default classes that Filament applies, you can extend the Filament form components and override the getDefaultClasses method to return an empty array or your custom classes.

Here's an example of how you might extend a Filament form component:

namespace App\Filament\Forms\Components;

use Filament\Forms\Components\TextInput as FilamentTextInput;

class TextInput extends FilamentTextInput
{
    protected function getDefaultClasses(): array
    {
        // Return an empty array to remove all default classes
        // or return an array with your custom classes
        return [];
    }
}

Then, in your Livewire component, use your custom TextInput component instead of the one provided by Filament:

use App\Filament\Forms\Components\TextInput;

// ...

public function form(Form $form): Form
{
    return $form
        ->schema([
            TextInput::make('email')
                ->email()
                ->required()
                ->extraInputAttributes(['class' => 'input input-bordered']),
        ])
        ->columns(2)
        ->statePath('data');
}

Customize the Livewire View: In your Livewire component's view, make sure to include your custom CSS file that contains the DaisyUI styles and any overrides for Filament's default styles.

{{-- livewire.form-test.blade.php --}}
@push('styles')
    <link href="{{ asset('css/custom-filament-styles.css') }}" rel="stylesheet">
@endpush

<div>
    {{ $this->form }}
</div>

By following these steps, you should be able to fully customize the styles of your Filament form within a Livewire component to match the rest of your application's DaisyUI styling.