Thèmes et style

Importer la feuille de style du paquet une fois dans le point d'entrée de l'application:

Code
import "form0-react/index.css"

Thèmes intégrés

theme accepte standard, modal, simplified ou spotlight. colorMode accepte light, dark ou system.

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

Le nom du thème et le mode couleur sélectionnent la classe Vanilla Extract intégrée correspondante. ne modifie pas automatiquement la propriété theme, donc une application peut choisir son propre appariement.

Thèmes personnalisés

L'exportation form0-react/theme.css.js expose le contrat de thème 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.
})

Passez la classe générée à theme:

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

Utilisez className pour le style au niveau de la forme et les éléments d'emballage ordinaires pour l'application environnante Le balisage de champ personnalisé appartient à un custom renderer.