When using extendVariants to inherit components, if defaultVariants is set, it cannot be overridden. Is this the expected behavior?

[u3u]

I want to use custom components to extend the default styles of NextUI components. However, when I use defaultVariants to set the default color, I am unable to use the color attribute to set other colors. Is this the expected behavior?

import { Button as NextUiButton } from '@nextui-org/button';
import { extendVariants } from '@nextui-org/system-rsc';

export const Button = extendVariants(NextUiButton, {
  defaultVariants: {
    color: 'primary',
  },

  variants: {
    color: {
      primary: 'hover:bg-primary-400 active:bg-primary-600',
    },
  },
});

<Button>Primary</Button>
// Unable to set color, it still renders the primary button.
<Button color="default">Default</Button>

When I changed to use defaultProps to set the default color, it worked.

import { Button as NextUiButton } from '@nextui-org/button';
import { extendVariants } from '@nextui-org/system-rsc';

export const Button = extendVariants(NextUiButton, {
  compoundVariants: [
    {
      className: 'hover:bg-primary-400 active:bg-primary-600',
      color: undefined,
    },
  ],

  variants: {
    color: {
      default: 'bg-default-200 hover:bg-default-100 active:bg-default-300',
      primary: 'hover:bg-primary-400 active:bg-primary-600',
    },
  },
});

NextUiButton.defaultProps = {
  color: 'primary',
};

[jrgarciadev]

Hey @u3u this is not intended it should support the default properties variants, I'll transform this into an issue, thanks for reporting it.

[HitEagle]

Hi @jrgarciadev, does that issue also the same reason ?
#2706 (comment)