Temi e styling

Importare il foglio di stile del pacchetto una volta nel punto di entrata dell'applicazione:

Code
import "form0-react/index.css"

Temi incorporati

theme accetta standard, modal, simplified o spotlight. colorMode accetta light, dark o system.

Code
<FormRenderer schema={schema} theme="standard" colorMode="system" />

Il nome del tema e la modalità colore selezionano la corrispondente classe di estratto di vaniglia incorporata. non modifica automaticamente la proprietà theme, quindi un'applicazione può scegliere il proprio accoppiamento.

Temi personalizzati

L'esportazione form0-react/theme.css.js espone il contratto a tema vars:

Code
import { createTheme } from "@vanilla-extract/css"
import { vars } from "form0-react/theme.css.js"

export const appTheme = createTheme(vars, {
  // Provide every color, type, spacing, and radius token in the contract.
})

Passa la classe generata a theme:

Code
<FormRenderer schema={schema} theme={appTheme} colorMode="light" />

Utilizzare className per lo styling a livello di forma e gli elementi ordinari del wrapper per l'applicazione circostante layout. Il markup del campo personalizzato appartiene a custom renderer.