LETUNOFF DOCS

Library. Sonner. Стилизация через Tailwind

🧱 Суть

Sonner позволяет кастомизировать внешний вид уведомлений через Tailwind-классы без создания собственных компонентов.

📦 Проблема

Стандартные Toast-уведомления часто не совпадают с дизайном приложения.

✅ Решение

Настроить стили глобально через компонент Toaster.

💻 Код

Базовая настройка всех Toast:

<Toaster
	toastOptions={{
	    className:
	        'backdrop-blur-md bg-white/20 border-2 border-gray-200 rounded-2xl shadow-lg',
    }}
/>

Можно добавлять стили для конкретных типов:

<Toaster
	toastOptions={{
		className:
			'backdrop-blur-md bg-white/20 border-2 rounded-2xl shadow-lg',    
		
		success: {
			className: 'border-l-4 border-l-green-500',
	    },
	    
		error: {
			className: 'border-l-4 border-l-red-500',
		},
	}}
/>

🎯 Вывод

  • toastOptions.className задаёт общие стили.
  • Типы (success, error и т.д.) позволяют делать разные варианты.
  • Для большинства приложений этого достаточно.

🔗 Связано

Обратные ссылки