I am trying to create a wrapper function that I can pass in an imported component and a string that I can then re-export without having to make a new component each time and add the className manually.

I am using radix ui components and tailwindcss and want to achieve something like this export const DropdownContent = styled(DropdownPrimitive.Content, styles.content); which would essentially allow me to style the radix component without all the boilerplate.

the function is styled, the left-hand side is the radix component and the right would either be tailwind from a css file or could be a string "bg-blue-100"

I have got the following to work but storybook doesn't like it and if I update the styles it breaks the component on hot reload.

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)} />;
  };
};

Thanks in advance for any help.