Open vetan2 opened 8 months ago
related issue: https://github.com/nextui-org/nextui/issues/1692
Ex) I want to add xl size for Input. So...
Input
import { Input as _Input, extendVariants } from "@nextui-org/react"; export const Input = extendVariants(_Input, { variants: { size: { xl: { inputWrapper: "h-unit-14 min-h-unit-14 rounded-large", input: "text-large", clearButton: "text-large", }, }, }, });
After looking at style source of Input, I realized that I needed to set multiple compountVariants to get the input to look right.
So I tried:
import { Input as _Input, extendVariants } from "@nextui-org/react"; export const Input = extendVariants(_Input, { variants: { size: { xl: { inputWrapper: "h-unit-14 min-h-unit-14 rounded-large", input: "text-large", clearButton: "text-large", }, }, }, compoundVariants: [ { radius: "full", size: "xl", class: { inputWrapper: "px-6", // ERROR: Type '{ inputWrapper: string; }' is not assignable to type 'ClassNameValue'. }, } ] });
But type of compoundVariants[number]["class"] cannot be object, I encountered a type error.
compoundVariants[number]["class"]
In the example above, the px of inputRapper may be trivial, but for the label, the UI is significantly warped.
px
inputRapper
It would be nice to be able to customize slots within compoundVariants.
compoundVariants
Or is there another way to do this that I'm not aware of?
import { Input as _Input, extendVariants } from "@nextui-org/react"; export const Input = extendVariants(_Input, { variants: { size: { xl: { inputWrapper: "h-unit-14 min-h-unit-14 rounded-large", input: "text-large", clearButton: "text-large", }, }, }, compoundVariants: [ { radius: "full", size: "xl", class: { inputWrapper: "px-6", // <-- }, } ] });
I expect to be able to customize the slot within compoundVariants.
I can do this:
<Input classNames={{ inputWrapper: "px-6" }} />
But in my case, I think it's better to use extendVariants.
extendVariants
No response
ENG-597 [Feature Request] Support slot customizing for compoundVariants
I have the same problem with any compoundVariants. It just doesn't apply the styles. Any updates on this?
Same issue here -- at least make a note in the docs saying this isn't supported@
Is your feature request related to a problem? Please describe.
related issue: https://github.com/nextui-org/nextui/issues/1692
Ex) I want to add xl size for
Input
. So...After looking at style source of
Input
, I realized that I needed to set multiple compountVariants to get the input to look right.So I tried:
But type of
compoundVariants[number]["class"]
cannot be object, I encountered a type error.In the example above, the
px
ofinputRapper
may be trivial, but for the label, the UI is significantly warped.It would be nice to be able to customize slots within
compoundVariants
.Or is there another way to do this that I'm not aware of?
Describe the solution you'd like
I expect to be able to customize the slot within
compoundVariants
.Describe alternatives you've considered
I can do this:
But in my case, I think it's better to use
extendVariants
.Screenshots or Videos
No response