Estoy tratando de crear una función contenedora que pueda pasar en un componente importado y una cadena que luego pueda volver a exportar sin tener que crear un componente nuevo cada vez y agregar el nombre de clase manualmente.

Estoy usando componentes radix ui y tailwindcss y quiero lograr algo como esto export const DropdownContent = styled(DropdownPrimitive.Content, styles.content); lo que esencialmente me permitiría diseñar el componente radix sin todo el repetitivo.

la función tiene estilo, el lado izquierdo es el componente radix y el derecho sería el viento de cola de un archivo css o podría ser una cadena "bg-blue-100"

Tengo lo siguiente para trabajar, pero al libro de cuentos no le gusta y si actualizo los estilos, rompe el componente en la recarga en caliente.

 import clsx from "clsx"; type Styled = ( Component: React.FC<any>, styles: string ) => React.FC<{ className: string }>; export const styled: Styled = (Component, styles) => { return function StyledComponent({ className, ...props }) { return <Component {...props} className={clsx(styles, className)} />; }; };

Gracias de antemano por cualquier ayuda.