I want to change bg-color of the notification. How can I do it .I am using Tailwind as css fram-work.
it shows loading and success/error notification with 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;
you can use below code to change the bg color
method1
<ToastContainer
toastStyle = {{ backgroundColor: "red", color: "#FFF"}}
/>
method2 In your css file you can write below css style
.Toastify__toast--success {
background: #00c781 !important;
color: #FFF !important;
font-weight: 200;
}
.Toastify__toast--error {
background: red !important;
color: #FFF !important;
font-weight: 200;
}