Quiero cambiar el color de fondo de la notificación. ¿Cómo puedo hacerlo? Estoy usando Tailwind como marco de trabajo CSS.
muestra carga y notificación de éxito/error con bg-white
class App extends Component { orderHandler = () => { toast.loading("Please wait",{ position: toast.POSITION.TOP_CENTER, progressClassName: 'success-progress-bar', toastId: 2 }); axios .get("https://restcountries.com/v3.1/all") .then((response) => { console.log(response); toast.update(2, { render: "done", type: "success", hideProgressBar: true, autoClose:1000, isLoading: false }); }) .catch((error) => { console.log(error); toast.update(2, { render: "error", type: "error", isLoading: false }); }); }; render() { return ( <div> <button onClick={this.orderHandler}>click</button> <ToastContainer/> </div> ); } } export default App;puede usar el siguiente código para cambiar el color bg
Método 1
<ToastContainer toastStyle = {{ backgroundColor: "red", color: "#FFF"}} />method2 En su archivo css puede escribir debajo del estilo css
.Toastify__toast--success { background: #00c781 !important; color: #FFF !important; font-weight: 200; } .Toastify__toast--error { background: red !important; color: #FFF !important; font-weight: 200; }