Styling
You can style your notifications globally with the toastOptions
inside the Toaster component, or for each notification manually.
Set default for all toasts
<ToastertoastOptions={{className: '',style: {border: '1px solid #713200',padding: '16px',color: '#713200',},}}/>
Set default for specific types
<ToastertoastOptions={{success: {style: {background: 'green',},},error: {style: {background: 'red',},},}}/>
Style per toast
toast('I have a border.', {style: {border: '1px solid black',},});
Changing the offset
If you want to change the offset of your noticiations, add a margin to your toastOptions
.
<ToastertoastOptions={{style: {margin: '50px',},}}/>
Change icon color
All icon colors can be changed by supplying a iconTheme
with a primary
& secondary
color.
<ToastertoastOptions={{success: {iconTheme: {primary: 'green',secondary: 'black',},},}}/>