Remove all default styling

[terrabythia]

I might be missing something, but I cannot find out how you can remove the default styling, except for overwriting it. What I'm doing now is adding a custom class that resets all styling of the Toaster component, like this:

.resetToaster {
  background: transparent !important;
  color: currentColor !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

Is there a way to not add the styling in the first place?

[timolins]

Hi! Instead of removing all styles, I'd recommend to create your own renderer, which doesn't come with any styles.

import { Toaster, resolveValue } from 'react-hot-toast';

// In your app
<Toaster>
  {(t) => (
    <div
      style={{
        opacity: t.visible ? 1 : 0,
        background: 'white',
        padding: 8,
        display: "flex" 
     }}>
      {t.icon}
      {resolveValue(t.message, t)}
    </div>
  )}
</Toaster>;

[terrabythia]

@timolins thanks, that works!