Diagnostiquez les problèmes d’installation, de styles, d’hydratation et de matériaux.
Vérifiez que vous utilisez React 19 et importez la feuille de styles une seule fois. Testez un composant minimal sans conteneurs propres au projet :
import { Button } from "@liquidify/react"
import "@liquidify/react/styles.css"
export function CheckLiquidify() {
return <Button onPress={() => console.log("ok")}>Check</Button>
}S’il fonctionne, ajoutez les fournisseurs et conteneurs un à un pour identifier le conflit.
@liquidify/react/styles.css à la racine ou dans l’entrée globale des styles.@liquidify/glass, importez @liquidify/glass/glass.css.Testez sur un arrière-plan texturé ou contrasté. Une couleur uniforme peut masquer le flou.
Safari et Firefox affichent le traitement dépoli et les reflets statiques, sans la réfraction propre à Blink. Consultez la compatibilité.
Vérifiez overflow, les transformations, l’opacité et l’isolation des ancêtres : ils peuvent créer des découpages ou des contextes d’empilement inattendus.
window, document ni le stockage lors de l’évaluation du module.Consultez le rendu serveur.
Les dialogues, feuilles, menus, popovers et infobulles utilisent des portails. S’ils passent derrière l’interface, retirez les z-index ajoutés arbitrairement et vérifiez le contexte d’empilement du conteneur du portail.
Testez le contrôle isolément si le focus ou la fermeture échoue. Si vous contrôlez open, mettez-le à jour dans onOpenChange.
Consultez la référence générée du composant. Les props material, size, tint et name ne sont pas disponibles sur tous les contrôles.
Fixez la version installée et comparez-la à la version documentée. L’API expérimentale peut évoluer entre les versions.