За основу взят компонент react-toastify
Для использования необходимо куда либо в приложение (можно на верхний уровень) добавить
<Notification />
В нём будут находиться нотификации
Вызов нотификации: notify.{type}({ title, message? })
Стилизация отличается от всех остальных компонентов из за своей сложности и совместимости с библиотекой, по этому тут отсутствуют appearance и baseAppearance. Стилизуется только один раз и настраиваются цвета для разных типов
Компоненты { closeButton titleWrapper title message } стилизуются на верхнем уровне
Компоненты { toast progressBar } стилизуются в зависимости от типа нотификации {TypeOptions} from react-toastify
Пример темы:
export const theme = {
components: {
[NOTIFICATION_COMPONENT_NAMESPACE]: {
[NOTIFICATION_COMPONENT_NAMES.closeButton]: {},
[NOTIFICATION_COMPONENT_NAMES.titleWrapper]: {
fontSize: "18px",
},
[NOTIFICATION_COMPONENT_NAMES.message]: {
fontSize: "13px",
},
[NOTIFICATION_COMPONENT_NAMES.title]: {
marginLeft: '20px',
},
info: {
[NOTIFICATION_COMPONENT_NAMES.toast]: {
background: "#636AFF",
},
[NOTIFICATION_COMPONENT_NAMES.progressBar]: {
background: "blue",
},
},
success: {
[NOTIFICATION_COMPONENT_NAMES.toast]: {
background: "#41CC78",
},
[NOTIFICATION_COMPONENT_NAMES.progressBar]: {
background: "green",
},
},
warning: {
[NOTIFICATION_COMPONENT_NAMES.toast]: {
background: "#FB751C",
},
[NOTIFICATION_COMPONENT_NAMES.progressBar]: {
background: "orange",
},
},
error: {
[NOTIFICATION_COMPONENT_NAMES.toast]: {
background: "#FF6666",
},
[NOTIFICATION_COMPONENT_NAMES.progressBar]: {
background: "red",
},
},
default: {
[NOTIFICATION_COMPONENT_NAMES.toast]: {
background: "#636AFF",
},
[NOTIFICATION_COMPONENT_NAMES.progressBar]: {
background: "blue",
},
},
},
},
};