跳转至

title: [ISSUE-0019] FormProvider 强制 flex column 对 Dialog 表单的潜在副作用 description: "FormProvider 强制 flex column 对 Dialog 表单的潜在副作用（观察）" tags: [issue] created: 2026-05-26 updated: 2026-05-26 type: issue status: fixed severity: minor

[ISSUE-0019] FormProvider 强制 flex column 对 Dialog 表单的潜在副作用

相关源码：src/components/hook-form/form-provider.tsx 发现途径：v0.10.19 代码审查

用户感知的现象

理论：含 RHF 表单的 Dialog 在某些 paper sx 设置下可能布局塌陷。

实际：当前项目的 DeleteConfirmDialog / ExportConfirmDialog 等都用 MUI DialogContent，本身是 flex column，所以 form 加 flex 顺势 fill。未发现实际 bug。

根因

export default function FormProvider({ children, onSubmit, methods }) {
  return (
    <Form {...methods}>
      <form style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
        {children}
      </form>
    </Form>
  );
}

flex: 1 在父级不是 flex 容器时被忽略（block 布局下 flex 属性不生效）。minHeight: 0 同理。正常情况无副作用。

但若父级是 flex column 而内容高度 < 容器，form 会被拉伸 → 内容上对齐而非自然布局。

观察清单

如果以下场景出现布局 bug，回来修： - 创建任务 Dialog 内容在窄屏溢出 - 升级会员对话框按钮居中变成上对齐 - 任何 dialog/popover 里的表单 padding 显得过大

修复方案（如需）

把 flex 改成 opt-in prop：

type Props = {
  children: React.ReactNode;
  methods: UseFormReturn<any>;
  onSubmit?: VoidFunction;
  fillParent?: boolean;  // 显式 opt-in
};

<form style={fillParent ? { display: 'flex', ... } : undefined}>

调用方明确需要 fill 的（settings-view）才传 fillParent。

如何避免再犯

  • 共用组件加默认行为变更必须验证所有调用点：grep 全项目找 FormProvider 用法
  • CSS 副作用难发现：能用 prop 显式控制就别隐式

相关问题