React TypeScript项目适配BEM的类名工具推荐求助

下面几个工具都能完美适配TypeScript + React（TSX）项目，且在Vite环境下无需复杂配置就能使用：

• 自定义BEM工具函数 + classnames
  这是最灵活且无冗余依赖的方案，自己写个简单的TS函数实现BEM规则，再配合classnames处理动态类名组合。
  示例实现：

  type BemModifiers = Record<string, boolean | string | undefined>;
  
  const createBem = (block: string) => ({
    // 生成元素类名
    element: (element: string) => `${block}__${element}`,
    // 生成带修饰符的块类名
    modifier: (modifiers: BemModifiers) => {
      const modifierClasses = Object.entries(modifiers)
        .filter(([_, val]) => Boolean(val))
        .map(([key]) => `${block}--${key}`);
      return [block, ...modifierClasses].join(' ');
    },
    // 生成带修饰符的元素类名
    elementModifier: (element: string, modifiers: BemModifiers) => {
      const elemClass = `${block}__${element}`;
      const modifierClasses = Object.entries(modifiers)
        .filter(([_, val]) => Boolean(val))
        .map(([key]) => `${elemClass}--${key}`);
      return [elemClass, ...modifierClasses].join(' ');
    }
  });
  
  // TSX中使用示例
  const bem = createBem('button');
  <button className={bem.modifier({ primary: true, disabled: false })}>
    <span className={bem.elementModifier('icon', { large: true })}>🔘</span>
    点击按钮
  </button>
  

  配合classnames可以更便捷地混合自定义类名：

  import classNames from 'classnames';
  
  const buttonClasses = classNames(
    bem.modifier({ primary: isPrimary }),
    { 'external-class': hasExternalClass }
  );
  

• bem-cn
  轻量级BEM工具库，原生支持TypeScript，API简洁直观，零配置即可在TSX中使用。
  示例代码：

  import bem from 'bem-cn';
  
  const button = bem('button');
  
  <button className={button({ primary: true, disabled: isDisabled })}>
    <span className={button('icon')}>🔘</span>
    点击按钮
  </button>
  

  它支持元素、修饰符的链式调用，类型定义完善，能在编写时提供准确的代码提示。

• @bem-react/classname
  专为React + TypeScript打造的BEM类名生成库，提供类型安全的API，完全遵循BEM规范，还支持与CSS Modules结合使用。
  示例代码：

  import { cn } from '@bem-react/classname';
  
  const button = cn('button');
  
  // 基础块类名
  <div className={button()}>...</div>
  // 块+元素
  <div className={button('icon')}>...</div>
  // 块+修饰符
  <div className={button({ primary: true, size: 'lg' })}>...</div>
  // 元素+修饰符
  <div className={button('icon', { rotated: true })}>...</div>
  

  这个库的类型系统会在编译阶段校验类名的合法性，避免拼写错误，Vite项目安装后直接导入即可使用。

内容的提问来源于stack exchange，提问作者Mohhaliim