Блог

Я успешно интегрировал react-alert в свою панель мониторинга, но я хочу изменить цвет фона оповещения, поскольку он не соответствует теме моего пользовательского интерфейса.

Изображение предупреждения

Я попытался изменить цвет фона из файла шаблона, который содержит свойство background color, но изменение в нем не отражается.

Рабочий код react-alert:

https://codesandbox.io/s/l2mo430lzq

Дайте мне знать, если есть какое-либо решение для этого.

Вы можете создать свой собственный шаблон и обновить тему в соответствии с вашими потребностями.

JS:

 import React from "react";
import { render } from "react-dom";
import { positions, Provider } from "react-alert";
import Home from "./Home";
import "./style.css";

const options = {
  timeout: 500000,
  position: positions.BOTTOM_CENTER
};

const AlertTemplate = ({ message }) => (
  <div className="alert red-bg">{message}</div>
);

const App = () => (
  <Provider template={AlertTemplate} {...options}>
    <Home />
  </Provider>
);

render(<App />, document.getElementById("root"));
 

CSS — код:

 .red-bg {
  // Add extra styles which is matched with your theme
  background-color: red;
}