Customization of Chip coponent

[Kilian-mescam]

Hello,

I id like to customize the Chip component in order to use my own colors, etc. I use react and typescript. I receive an error due to my customization "TypeError: Cannot convert undefined or null to object"

I, firstly, created a customChip component based on Chip component from Material-tailwind :

interface CustomChipProps extends Omit<ChipProps, "color"> { variant?: "filled" | "gradient"; className?: string; value: string; color?: | "primary" | "secondary" | "warning" }

export default function CustomChip(props: CustomChipProps) { return <Chip {...(props as any)} />; }

then I create a baseChip component based on my CustomChip component :

export const BaseChip: React.FC<React.PropsWithChildren<CustomChipProps>> = ( props: React.PropsWithChildren<CustomChipProps> ): JSX.Element => ( <CustomChip variant={props.variant} color={props.color} value={props.value} /> );

on my theme file, i added the chip component, I think the problem is here, my I did an error but i don't know how to custom each part :

chip: { defaultProps: { variant: 'filled', color: 'primary', show: true, size: 'sm', }, valid: { variants: ['filled'], colors: ['primary', 'secondary', 'warning', 'dark'], }, styles: { base: { position: "relative", }, variants: { filled: { primary: { background: 'bg-primary', color: 'text-white', }, secondary: { background: 'bg-secondary', color: 'text-dark', }, }, }, closeButtonColor: { filled: { primary: { color: 'text-white', }, secondary: { color: 'text-dark', }, warning: { color: 'text-white', }, }, }, },

Thank you Kilian`

[sajadevo]

Hi @Kilian-mescam,

Please use this page and see the theme object structure for the chip component. Chip Theme

Cheers, Sajad

[Kilian-mescam]

Hi Sajad,

Thank you for your answer. I am sorry but it is not clear what do I have to put inside 'object'.

Here is my code inside the theme file. Still got the problem "TypeError: can't convert undefined to object"

chip: { defaultProps: { variant: 'filled', color: 'primary', }, valid: { variants: ['filled', 'gradient'], colors: ['primary', 'light', 'primaryBeta', 'primaryGamma', 'secondary', 'secondaryBeta', 'secondaryGamma', 'success', 'successBeta', 'error', 'medium', 'dark', 'orange', 'orangeBeta', 'yellow', 'yellowBeta', 'purple', 'purpleBeta', 'green', 'greenBeta', 'neutralDelta', 'neutral', 'neutralBeta', 'neutralGamma', 'backgroundBeta'] }, styles: { base: { position: "relative", }, variants: { filled: { primary: { background: 'bg-primary', color: 'text-light', }, secondary: { background: 'bg-secondary', color: 'text-light', } }, }, }, },

[Kilian-mescam]

Hi Sajad,

it seems that we can't add new colors in chip customization. It works well for me but when I add new colors inside "valid" i got the error "TypeError: can't convert undefined to object"

[Kilian-mescam]

hello,

please could you help me cause I'm stuck, nothing works. It seems to be impossible to customize the components. Everything is very difficult. I have the same problem with the Select, the switch, etc. I tried to do the same thing I did with the Button Component in order to add new colors and it doesn't work. It's very very difficult to understand what do we have to modify.

[sajadevo]

Hi @Kilian-mescam,

Please see this link and it's related files the variants is an object of objects of each color name: https://github.com/creativetimofficial/material-tailwind/blob/main/packages/material-tailwind-react/src/theme/components/chip/chipFilled.ts

Cheers, Sajad

[Kilian-mescam]

Hi @sajadevo

Thank you, I didn't see all these informations. It helps a lot. In my opinion you shoultd put it on the website in order to help more.

Kilian

[Kilian-mescam]

Hi,

ok thank you, but I don't really understand what do I have to put as "Object" ? Is it written somewhere ? How can I know ? thank you

Le lun. 19 sept. 2022 à 07:49, Sajad Ahmad Nawabi @.***> a écrit :

Hi @Kilian-mescam https://github.com/Kilian-mescam,

Please use this page and see the theme object structure for the chip component. Chip Theme https://www.material-tailwind.com/docs/react/theme/chip

Cheers, Sajad

— Reply to this email directly, view it on GitHub https://github.com/creativetimofficial/material-tailwind/issues/222#issuecomment-1250595350, or unsubscribe https://github.com/notifications/unsubscribe-auth/ATHRVNGBHJOMYQ2NKF3AJ33V675FTANCNFSM6AAAAAAQNNL4HE . You are receiving this because you were mentioned.Message ID: @.***>