javascript - 建立元件導出包裝器的最佳方法是什麼，我可以傳入 className

我正在嘗試創建一個包裝函數，我可以傳入一個已導入的組件和一個字串，然後重新導出，而不必每次都創建一個新組件並手動添加 className。

我正在使用 radix ui 組件和 tailwindcss，並想實現類似這樣的效果 export const DropdownContent=styled(DropdownPrimitive.Content, styles.content);，這基本上允許我在不需要所有樣板代碼的情況下對 radix 組件進行樣式設計。

函數已經設計過樣式，左側是 radix 元件，右側要麼是來自 CSS 文件的 tailwind，要麼可以是一個字串 "bg-blue-100"

我已經讓以下內容運作，但 storybook 不喜歡它，而且如果我更新樣式，熱重載時會破壞元件。

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

先行感謝您的任何幫助。