[BUG] - ExtendVariants does not retain applied styles (always reverts to default styles) in 2.2.9

[cheestudio]

NextUI Version

2.2.9

Describe the bug

I am extending the Button component with some variants and it's been working great:

import { extendVariants, Button } from "@nextui-org/react";

const base = "wallabie-button relative rounded-[5px] border border-solid shadow-wallabie-light py-2 px-5 text-sm border-[#E9DBCC] bg-wallabie-offwhite text-wallabie-gray hover:border-wallabie-tan/40 hover:shadow-wallabie-dark";

export const ButtonExt = extendVariants(Button, {
  variants: {
    color: {
      light: `${base}`,
      dark: `${base} border-[#E9DBCC] bg-wallabie-teal-100 text-wallabie-black`,
    },
    type: {
      icon: `${base} p-2`,
      text: `${base} p-2 bg-transparent border-none underline hover:text-wallabie-orange shadow-none`,
    },
  },
  defaultVariants: { 
    color: "light"
  }
});

Since updating 2.2.9, the styles apply on first render, but any subsequent renders (e.g. opening a modal) causes reverts the button styles back to the original default gray styling.

On render:

After opening a modal:

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Install NextJS with NextUI

Extend variants of Button and apply

Expected behavior

The button styles should be consistent, rather than reverting to the default styles

Screenshots or Videos

No response

Operating System Version

Windows

Browser

Chrome

[cheestudio]

As an update: it seems the defaultVariant does not retain on render.

<ButtonExt onPress={(e) => console.log(e)}>Get Started</ButtonExt>

If I force a variant, it seems to work fine:

<ButtonExt color="light" onPress={(e) => console.log(e)}>Get Started</ButtonExt>

[CSpencerND]

Having the same issue. When navigating back from another page, the defaults variants are broken, but If I explicitly set the props on my component they don't break.

[xxxijustwei]

Please rewrite compoundVariants, like:

export const EButton = extendVariants(Button, {
    compoundVariants: [
        {
            className: "bg-p-base text-t-100 font-[800]",
        }
    ],
    variants: {
        color: {
            default: "bg-p-base text-t-100 font-[800]"
        }
    },
    defaultVariants: {
        color: "default",
        size: "md"
    }
});

[william0619]

I also encountered this problem and do not know when it will be repaired