# Renderizzatori, temi e styling

<PageBadges />

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`.

```js
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](/it/bindings/react/custom-renderers) 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](/it/bindings/react/themes-styling) 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.