TypeScript TS2322错误：className函数类型无法分配给string类型如何解决

错误原因 #

你收到的TS报错核心是类型不匹配：你向只接受字符串类型的className属性传入了一个返回字符串的函数，两者类型不兼容所以抛出2322错误。

• 原生HTML元素、普通自定义React组件的className属性默认仅支持字符串类型入参，不支持函数类型
• 仅Headless UI、Radix UI等组件库的特定交互组件，才会对className做扩展支持传入函数，接收组件内部的selected等状态动态生成类名
  你之前给selected加any标注、添加eslint忽略规则都无效，是因为报错和函数内部的参数类型、布尔判断逻辑完全无关，问题出在函数本身的类型不符合className的要求。

解决办法 #

根据你使用的组件类型选择对应方案即可：

方案1：使用支持函数式className的组件库组件 #

你需要给当前组件引入组件库官方导出的类型定义，不要沿用原生DOM的className类型约束，类型匹配后报错就会消失。

方案2：使用原生DOM/普通自定义组件 #

不能使用函数式写法，提前拿到selected状态直接计算类名即可，写法参考：

// 从props/state等位置拿到selected状态值
const selected = yourSelectedValue
const dynamicClass = classNames(
  selected
    ? 'bg-gray-100 text-gray-900'
    : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900',
  'group flex items-center px-2 py-2 text-base font-medium rounded-md'
)

// 直接传入计算好的字符串类名
<div className={dynamicClass}>...</div>

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