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?
<img width="449" alt="image" src="https://github.com/user-attachments/assets/666006c2-245c-4a34-8f40-02259997e89b">

[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',
    },
  }}
/>