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

[multivoltage]

I customize a like this:

import styles from './other.module.css';

// in component
toast.success('Event has been created', {
    classNames: {
        success: styles.success,
        actionButton: styles.button,
     },
      action: <button className={styles.button}>ok</button>,
});

And in my css I have

.success {
	--success-text: red; // is I want to set variables
	--success-bg: yellow;
}
.success .button {
 border: 8px solid green;
 padding: 10px;
}

[emilkowalski]

I've updated the docs with better styling instructions - https://sonner.emilkowal.ski/styling.