chat-ui-react.usecomposedcssclasses.md

Home > @yext/chat-ui-react > useComposedCssClasses

useComposedCssClasses() function

useComposedCssClasses merges a component's built-in tailwind classes with custom tailwind classes.

Signature:

export declare function useComposedCssClasses<ClassInterface extends Partial<Record<keyof ClassInterface, string | object>>>(builtInClasses: Readonly<ClassInterface>, customClasses?: Partial<ClassInterface>): ClassInterface;

Parameters

Parameter	Type	Description
builtInClasses	Readonly<ClassInterface>	The component's built-in tailwind classes
customClasses	Partial<ClassInterface>	(Optional) The custom tailwind classes to merge with the built-in ones

Returns:

ClassInterface

The composed CSS classes

Remarks

Tailwind classes will be merged without conflict, with custom classes having higher priority than built-in ones.

Example

Suppose a component has built-in classes of { container: 'px-4 text-slate-700' }.

Passing in the custom classes:

{ container: 'text-red-200 mb-3' }

results in the merged classes of:

{ container: 'px-4 text-red-200 mb-3' }