Кастомные стили через параметр style

Библиотека Toastify предоставляет возможность отображать уведомления в веб-приложениях с минимальными усилиями. Один из самых гибких способов настройки внешнего вида уведомлений — использование параметра style, который позволяет задавать произвольные CSS-свойства для конкретного тоста.

Основы использования `style`

Параметр style передаётся в объект конфигурации при вызове функции Toastify(). Он принимает объект с ключами и значениями CSS-свойств в camelCase-формате. Например:

Toastify({
    text: "Успешное действие",
    duration: 3000,
    style: {
        background: "linear-gradient(to right, #00b09b, #96c93d)",
        color: "#fff",
        fontSize: "16px",
        borderRadius: "8px"
    }
}).showToast();

Разбор кода:

background – устанавливает фоновый градиент уведомления.
color – задаёт цвет текста.
fontSize – изменяет размер шрифта.
borderRadius – скругляет углы уведомления.

Все свойства передаются как строки, даже если значение является числом, требующим единиц измерения (px, em, %).

Приоритет кастомных стилей

Если одновременно используются параметры className и style, значение из style имеет приоритет. Это означает, что inline-стили перекрывают любые CSS-правила, подключенные через классы:

Toastify({
    text: "Важное уведомление",
    className: "toast-error",
    style: {
        background: "red",
        color: "yellow"
    }
}).showToast();

В этом примере даже если в .toast-error определён другой фон, красный будет отображаться на уведомлении.

Динамическое изменение стилей

Параметр style можно формировать динамически, исходя из условий приложения:

const isSuccess = true;

Toastify({
    text: "Результат операции",
    style: {
        background: isSuccess ? "green" : "orange",
        color: "#ffffff",
        padding: "10px 20px"
    }
}).showToast();

Такой подход позволяет использовать одно уведомление для разных статусов: успех, предупреждение или ошибка, изменяя внешний вид без создания отдельных CSS-классов.

Стилизация с псевдоэлементами и hover

Inline-стили через style напрямую не поддерживают псевдоэлементы (:hover, :before, :after). Для этого нужно использовать комбинацию с className. Например:

Toastify({
    text: "Наведите на меня",
    className: "toast-hover",
    style: {
        background: "#333",
        color: "#fff"
    }
}).showToast();

А CSS:

.toast-hover:hover {
    background: #555;
    transform: scale(1.05);
}

Таким образом, style отвечает за базовый внешний вид, а классы добавляют интерактивные эффекты.

Ограничения параметра `style`

Не поддерживаются CSS-переменные в виде объектов JS напрямую, их нужно вычислять заранее.
Нельзя передать несколько значений через массив, только строка (например, boxShadow: "0 4px 6px rgba(0,0,0,0.1)").
Анимации через style можно задавать, но лучше использовать CSS-классы для плавных переходов, чтобы не перегружать inline-стили.

Пример комплексного тоста

Toastify({
    text: "Системное сообщение",
    duration: 5000,
    close: true,
    gravity: "top",
    position: "right",
    style: {
        background: "#282c34",
        color: "#61dafb",
        fontWeight: "bold",
        fontSize: "18px",
        padding: "15px",
        borderRadius: "12px",
        boxShadow: "0 8px 16px rgba(0,0,0,0.2)"
    }
}).showToast();

Здесь показано полное использование style для кастомного оформления: тёмный фон, яркий текст, тень и скруглённые углы.