`richColors` does not style action button and other styling methods do not work

[williamlmao]

 <Toaster
          position="top-right"
          theme="dark"
          richColors
        />

Results in the following toast:

When I try to style it in the following ways, nothing works:

 <Toaster
          position="top-right"
          theme="dark"
          richColors
          toastOptions={{
            classNames: {
              actionButton: 'bg-green-900 text-white',
            },
          }}
        />

    This api also seems bad because you can't specify specific styles for each variant. 

   Which led me to try styling like this: 

       toast.success(title, {
  description: message,
  duration,
  action,
  classNames: {
    actionButton: 'group-[.toast]:bg-green-300 group-[.toast]:text-green-900',
  },
});

    toast.success(title, {
  description: message,
  duration,
  action,
  classNames: {
    actionButton: 'bg-green-300 text-green-900',
  },
});

But in the end the toast still had a white button. Has anyone else encountered this?

[jkinley]

I agree it does seem really difficult to theme these with different variants. Other than that its a siick lib.

[neokyox]

@williamlmao the only way I've found to style the buttons was using arbitrary variants plus important modifier, like so:

<Sonner
  theme='light'
  richColors
  toastOptions={{
    classNames: {
      toast: 'shadow-lg rounded-lg flex items-center p-4 text-xs gap-1.5',
      error: '[&>button]:!bg-red-600',
      info: '[&>button]:!bg-blue-600',
      success: '[&>button]:!bg-green-600',
      warning: '[&>button]:!bg-yellow-600',
    },
  }}
/>