Updated October 2026
Troubleshooting & Solutions
Diagnose common setup issues: hydration mismatches, z-index layering conflicts, CSP rules, and CSS imports.
On this page:
Toasts appear transparent or unstyled **Cause**: The theme CSS was not imported into your global application entrypoint. **Fix**: Add the theme stylesheet import to your root layout: ```typescript import 'toastory/themes/ios-glass.css'; ```
---
Next.js hydration warning on <body> **Cause**: A browser extension or layout component mutated the DOM before React hydration completed. **Fix**: Add `suppressHydrationWarning` to `<html>` in `app/layout.tsx`. toastory's React adapter avoids mounting to the DOM until after hydration completes.
---
Modals appearing underneath navigation headers **Cause**: A fixed header has a high `z-index` exceeding the default. **Fix**: toastory uses `--gk-z: 2147483000` by default. You can increase this globally in your CSS: ```css :root { --gk-z: 2147483647; } ```
Want to test these options live?
Launch the interactive playground to experiment with themes, positions, and live generators.