更改 react-alert 的背景颜色

【问题标题】：Change background color of react-alert更改 react-alert 的背景颜色
【发布时间】：2021-01-11 18:37:05
【问题描述】：

我已成功将 react-alert 集成到我的仪表板中，但我想更改警报的背景颜色，因为它不适合我的 UI 主题。

Alert Image

我尝试从包含背景颜色属性的模板文件中更改背景颜色，但它的更改没有反映出来。

react-alert 的工作代码框：

https://codesandbox.io/s/l2mo430lzq

如果有任何解决方案，请告诉我。

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

您可以创建自己的模板并根据需要更新主题。

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;
}

【讨论】：