如何让EasyAdmin 4中集成的Symfony 6自定义表单匹配官方样式

问题背景 #

部分业务逻辑无法直接在EasyAdmin中实现，因此先在Symfony 6中完成功能开发，再集成到EasyAdmin（简称EA）中。集成流程本身无异常，但始终找不到正确的form_theme配置，导致自定义表单的视觉样式无法和EasyAdmin原生表单保持统一。
本次开发创建的是不绑定任何实体的表单类型：表单校验通过后，系统会根据输入数据生成并持久化多个实体。

现有实现代码 #

控制器代码 #

<?php
    
namespace App\Controller\Admin;
    
use App\Form\Type\NewTextType;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
    
class TextController extends AbstractController
{
    #[Route('/admin/text/new', name: 'new_text')]
    public function new(): Response
    {
        $defaultData = [];
        $form = $this->createForm(NewTextType::class, $defaultData);

        if ($form->isSubmitted() && $form->isValid()) {
            $data = $form->getData();

            // 处理数据、持久化为不同实体
            // 重定向回空表单页面
        }

        return $this->renderForm('admin/text/new.html.twig', [
            'form' => $form,
        ]);
    }
}

模板代码 #

{% extends '@EasyAdmin/page/content.html.twig' %}
{% form_theme form 'foundation_5_layout.html.twig' %}

{% block content_title %}
    <h1 class="title">Add new Text</h1>
{% endblock %}

{% block main %}
    {{ form(form) }}
{% endblock %}

异常表现 #

• 使用foundation_5_layout.html.twig作为表单主题时，表单样式错乱严重
• 替换为bootstrap_5_layout.html.twig后样式有所改善，但即使BODY标签已带有data-ea-dark-scheme-is-enabled="true"属性，EasyAdmin的深色模式等外观配置依然无法在自定义表单上生效

当前运行环境版本：Symfony 6.1.2、EasyAdmin 4.3.2

解决方案 #

核心问题是表单主题选型错误，EasyAdmin自带适配自身全套UI规范（含深色模式、控件样式、交互状态）的专用表单主题，无需使用Symfony自带的foundation、bootstrap类通用表单主题。

• 第一步：将模板中的form_theme配置替换为EasyAdmin内置主题路径

  {% form_theme form '@EasyAdmin/crud/form_theme.html.twig' %}
  

• 第二步：若要实现和EA原生CRUD表单完全一致的卡片包裹、底部操作栏样式，不要直接输出{{ form(form) }}，替换为EA标准表单结构即可

  {% block main %}
      <div class="form-panel">
          {{ form_start(form) }}
              <div class="form-body">
                  {{ form_widget(form) }}
              </div>
              <div class="form-actions d-flex justify-content-end">
                  <button type="submit" class="btn btn-primary">保存</button>
              </div>
          {{ form_end(form) }}
      </div>
  {% endblock %}
  

配置完成后表单会自动继承全局外观配置，深色模式、控件尺寸、错误提示、间距样式都会和EA原生表单完全统一，不会出现样式冲突。

注意：不要混用Symfony自带的第三方框架表单主题，这类主题没有适配EA的自定义样式规则，必然会出现显示异常、深色模式失效的问题。

内容的提问来源于stack exchange，提问作者Zoltán Süle