[BUG] - Original default variant is still applied when new variant is added with extendVariants

[uiii]

NextUI Version

2.3.6

Describe the bug

I am trying to add new variant for maxWidth to the Navbar component. My goal is to not set max-width to the wrapper slot and add the container class instead.

So I extended variants like this:

const CustomNavbar = extendVariants(Navbar, {
  variants: {
    maxWidth: {
      container: {
        wrapper: "container"
      }
    }
  },
  defaultVariants: {
    maxWidth: "container"
  }
});

But when I use the CustomNavbar the container class is successfully added to the wrapper slot, but the max-width from the original default variant (lg) is there as well.

Even if I specifically set the maxWidth="container" prop it doesn't help.

Your Example Website or App

https://codesandbox.io/p/devbox/cocky-microservice-dszkmp?file=%2FApp.jsx%3A21%2C20

Steps to Reproduce the Bug or Issue

See the bug description and codesandbox.

Expected behavior

The original default variant is not applied of the different one is set.

Screenshots or Videos

No response

Operating System Version

Windows 10

Browser

Chrome

[linear[bot]]

ENG-798 [BUG] - Original default variant is still applied when new variant is added with extendVariants

[wingkwong]

I think they won't be merged since container changes max-width based on the breakpoint. If you put something like max-w-[100px], you can see max-w-[1024px] is replaced by max-w-[100px].

Therefore, in your case, you can simply do the following

const CustomNavbar = extendVariants(Navbar, {
  variants: {
    maxWidth: {
      container: {
        wrapper: "max-w-[unset] container"
      }
    }
  },
  defaultVariants: {
    maxWidth: "container"
  }
});