Rendus, thèmes et style

Le starter conserve les contrats de rendu des paquets séparés de la présentation de l'application. form0-react/index.css une fois, puis superposez les choix spécifiques à l'application sur le dessus.

Champ renderers

L'application renderer remplace live dans src/field-renderers. Pour en ajouter un:

1. Créez le composant React.
2. Ajoutez-le à src/field-renderers/resolver.js sous un identifiant stable.
3. Assignez le type de champ form0 à cet identifiant dans form0.config.js.

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

La date incluse renderer montre la composition des props de champ form0 avec les primitives shadcn/ui. Examinez le contrat personnalisé renderer avant de créer des overrides.

Thèmes

Définissez theme.mode sur light, dark, ou system. Pour remplacer le thème du paquet, créez un Extrayez le thème sous src/themes et définissez theme.customTheme sur son chemin d'importation.

Le thème personnalisé doit mettre en œuvre le contrat complet du thème form0-react. src/themes/custom-example.css.js comme point de départ et voir Thèmes et style pour le contrat.

Application CSS

Utilisez ces couches pour différentes responsabilités:

• src/index.css pour Tailwind, les jetons shadcn et les styles d'application globaux;
• src/App.css pour la mise en page d'application;
• src/styles/form0-overrides.css pour les classes de formulaires appartenant à l'application; et
• Thèmes pour le paquet renderer.

Préférez les contrats d'enregistrement et de thème renderer à l'édition de code dans les paquets form0 installés.