Renderizzatori, temi e styling

starter mantiene i contratti di rendering dei pacchetti separati dalla presentazione dell'applicazione. form0-react/index.css una volta, quindi stratificare le scelte specifiche dell'applicazione in cima.

Campo renderers

Applicazione renderer esegue l'override dal vivo in src/field-renderers. Per aggiungerne uno:

1. Creare il componente React.
2. Aggiungilo a src/field-renderers/resolver.js sotto un identificatore stabile.
3. Mappare il tipo di campo form0 a tale identificatore in form0.config.js.

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

La data inclusa renderer dimostra la composizione di props di campo form0 con shadcn/ui primitives. Rivedere il contratto custom renderer prima di creare ulteriori sovrascrizioni.

Temi

Impostare theme.mode su light, dark o system. Per sostituire il tema del pacchetto, creare una vanilla Estrai il tema in src/themes e imposta theme.customTheme sul suo percorso di importazione.

Il tema personalizzato deve implementare il contratto tematico completo form0-react. src/themes/custom-example.css.js come punto di partenza e vedere Temi e stile per il contratto.

Applicazione CSS

Usa questi livelli per diverse responsabilità:

• src/index.css per Tailwind, shadcn token e stili di applicazione globali;
• src/App.css per il layout dell'applicazione;
• src/styles/form0-overrides.css per classi di moduli di proprietà dell'applicazione; e
• Estrai temi per i token del pacchetto renderer.

Preferisci la registrazione renderer e i contratti a tema per la modifica del codice all'interno dei pacchetti form0 installati.