Question

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

Alert Image

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

反应警报的工作代码框：

https://codesandbox.io/s/l2mo430lzq

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

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

更改反应警报的背景颜色

1 个答案: