I tried it like this but it doesn't do anything:
const myToast = () => (
<div style={{backgroundColor: myColors.green}}>
...some text content...
</div>
)
Then in App.js
class App extends Component {
showMyToast = () => {
toast(<MyToast />, {
closeOnClick: false,
toastId: 'my_toast',
autoClose: true,
closeButton: false,
position: toast.POSITION.BOTTOM_CENTER,
className: 'toast'
})
}
}
I'm seeing a white toast with my text on it.
Based on @Laurens answer I found the pattern in the code sandbox very useful. Here's what I did to get the notification shown below
First, I mounted my toast container at the root of my App, inside my App
component
import React from 'react';
import { Provider } from 'react-redux';
import { ToastContainer } from 'react-toastify';
import store from './redux/store';
import Routes from './Routes';
const App = () => {
return (
<Provider store={store}>
<ToastContainer
autoClose={2000}
position="top-center"
className="toast-container"
toastClassName="dark-toast"
/>
<Routes />
</Provider>
);
};
Then, for each notification style, I defined a series of CSS styles. The components looked like so
// customToast.js
import { toast } from 'react-toastify';
import { css } from 'glamor';
const customToast = {
success(msg, options = {}) {
return toast.success(msg, {
...options,
className: 'toast-success-container toast-success-container-after',
progressClassName: css({
background: '#34A853',
}),
});
},
error(msg, options = {}) {
return toast.error(msg, {
...options,
className: 'toast-error-container toast-error-container-after',
progressClassName: css({
background: '#EE0022',
}),
});
},
info(msg, options = {}) {
return toast.info(msg, {
...options,
className: 'toast-info-container toast-info-container-after',
progressClassName: css({
background: '#07F',
}),
});
},
};
export default customToast;
To use these just do import customToast from 'customToast.js'
. Now you can use customToast.success
, customToast.error
etc
The style for the success notification is shown below
.toast-success-container {
color: #000 !important;
border-radius: 8px !important;
background: #FFFFFF !important;
border: 1px solid #34A853 !important;
box-shadow: 0px 1px 5px rgba(248, 175, 175, 0.1) !important;
}
.toast-success-container-after {
overflow: hidden;
position: relative;
}
.toast-success-container-after::after{
top: 0;
left: 0;
content: '';
width: 7px;
height: 100%;
position: absolute;
display: inline-block;
background-color: #34A853;
}
You'll also notice that I had to stick a series of !important
s in my css