Renderistas, temas y estilo

El starter mantiene los contratos de representación de paquetes separados de la presentación de la aplicación. form0-react/index.css una vez, luego capas de opciones específicas de la aplicación en la parte superior.

Campo renderers

Aplicación renderer anula vivir en src/field-renderers. Para agregar uno:

1. Cree el componente React.
2. Añádelo a src/field-renderers/resolver.js bajo un identificador estable.
3. Asigna el tipo de campo form0 a ese identificador en form0.config.js.

Code
fieldRenderers: {
  DateField: "date-field-shadcn",
}

La fecha incluida renderer demuestra la composición de los accesorios de campo form0 con primitivas shadcn/ui. Revise el contrato personalizado renderer antes de crear un contrato adicional Anulaciones.

Temas

Establezca theme.mode en light, dark o system. Para reemplazar el tema del paquete, cree una vainilla Extraiga el tema bajo src/themes y establezca theme.customTheme en su ruta de importación.

El tema personalizado debe implementar el contrato completo del tema form0-react. Uso src/themes/custom-example.css.js como punto de partida y ver Temas y estilo para el contrato.

CSS de aplicación

Utilice estas capas para diferentes responsabilidades:

• src/index.css para Tailwind, tokens shadcn y estilos de aplicaciones globales;
• src/App.css para el diseño de aplicaciones;
• src/styles/form0-overrides.css para las clases de formularios propiedad de la aplicación; y
• Temas de Vanilla Extract para los tokens renderer del paquete.

Prefiere los contratos de registro y temas de renderer sobre el código de edición dentro de los paquetes form0 instalados.