Better ways of overriding styles using typescript?

[JHunnicutt]

I'm refactoring a button component to take additional classes that extend or override the existing classes from the tv() function. I've read the docs on overriding classes, but it's not evident to me how to combine that the model of constructing a component with TypeScript, as passing className as an additional argument results in an error.

// Button.tsx
export const button = tv({
	base: '...',
	variants: { ... },
})

export type ButtonVariants = VariantProps<typeof button>

export type ButtonProps = Required<ButtonVariants> & {
	children: React.ReactNode
	onClick?: MouseEventHandler<HTMLButtonElement>
	type?: 'button' | 'submit' | 'reset'
}

export default function Button(props: ButtonProps) {
	const spreadProps = {
		...props,
		type: !props.type ? 'button' : props.type,
		role: 'button',
	}

	return (
		<button
		// expected 0, 1 arguments, but got 2.
			className={button(props, className)}
			{...spreadProps}
		>
			{props.children}
		</button>
	)
}

After some tinkering, I worked out a solution using the simple cn() function that relies on clsx and twMerge which comes with Shadcn/ui, and I thought that others may benefit from this solution.

// utils.js
import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
	return twMerge(clsx(inputs))
}

// Button.tsx
export type ButtonVariants = VariantProps<typeof button>

export type ButtonProps = Required<ButtonVariants> & {
	/*
	...
	added extra class prop
	*/
	customClasses?: string
}

export default function Button(props: ButtonProps) {
	const { customClasses } = props

	return (
		<button
		// enclosed tv function inside of cn
			className={cn(button(props), customClasses)}
		>
			{props.children}
		</button>
	)
}


// page.tsx
<Button
	role={'tertiary'}
	size={'medium'}
	customClasses="w-40 bg-red-600"
>
	Log Out
</Button>

This provides the exact functionality that I was hoping to implement. I'm not sure if there's a different way to handle this situation using the tools extended by TypeScript and Tailwind Variants, and I'd love to receive correction here if so. However, if you're struggling with setting up a type safe component to take some overriding classes, this workaround might be the trick you need.

[mskelton]

@JHunnicutt Did you try this?

<button
	className={button({...props, className})}
	{...spreadProps}
>
	{props.children}
</button>

[JHunnicutt]

Ah, thanks! Yes that is a more efficient way to do this. I'm not sure why I did not connect the dots in this way before.