Trouble with className

[Android789515]

I'm trying to set up class name:

<Toaster
   toastOptions={{
      // Not working
      className: styles.toaster,

      // Not working
      className: 'toaster',

      // Working
      style: {
         background: 'red',
      },
   }}
/>

My CSS:

.toaster {
   background: red;
}

[Android789515]

The issue was specificity. Overriding default styles can be a pain in CSS modules as you have to override the specificity of the default class.

The current fix, increase specificity:

.toaster.toaster {
   background: red;
}