Início / coding / Perguntas / 79542652
Accepted
Alex T.
Asked: 2025-03-29 09:12:40 +0800 CST

Assistente de formulário Filamentphp no componente livewire não usando @filamentStyles ou @filamentScripts

  • 772

Eu consigo criar um formulário Filamentphp em um componente livewire para exibi-lo em uma página pública. No entanto, ele não está usando os estilos filament. Aqui está meu componente livewire

<?php

namespace App\Livewire;
use Filament\Forms\Components\Wizard;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Livewire\Component;

class Submission extends Component implements HasForms
{
    use InteractsWithForms;
    public ?array $data = [];

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

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Wizard::make([
                    Wizard\Step::make('Wizard Step 1')
                        ->schema([
                            Select::make('type')
                                ->label('Do you want:')
                                ->options([
                                    'a' => 'A',
                                    'b' => 'B',
                                    'not_sure' => 'Not Sure',
                                ]),
                        ]),

                    Wizard\Step::make('Wizard Step 2')
                        ->schema([
                            TextInput::make('names'),
                        ]),

                ])
            ]);
    }
    public function render()
    {
        return view('livewire.submission');
    }
}

Aqui está minha visão de componente

<div class="flex justify-center items-center min-h-screen">
    <form wire:submit.prevent="submit" class="w-full max-w-md bg-white p-6 rounded shadow">
        <div>
            {{ $this->form }}
        </div>
    </form>
</div>

Aqui está a minha visualização de página

<x-app-layout>
    @livewire('submission')
</x-app-layout>

Aqui está meu layout

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Filament Styles -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
    @filamentStyles
</head>
<body class="antialiased bg-gray-100">
    <div class="min-h-screen">
        <!-- Replace this -->
        {{ $slot }}
        <!-- End replacement -->
    </div>

    @livewireScripts
    @filamentScripts
</body>
</html>

Aqui estão meus resultados: insira a descrição da imagem aqui

Você pode ver que o botão é branco sobre branco, e o menu suspenso tem um estilo descolado. Existe uma maneira de aplicar o mesmo tema de dentro do filamento e ainda ter a página pública sem todos os menus? Como a página de login ou registro é.

laravel

1 respostas

  1. Best Answer

    Leandro Ferreira do canal Discord respondeu isso e funcionou.

    no vite.config.jsarquivo, removatailwindcss()

    • 0

relate perguntas