将.jsx转.tsx后出现Tailwind CSS TypeScript类名隐式any类型错误求助

是的，必须定义类型——TypeScript不允许变量或参数隐式使用any类型，这也是TS类型安全的核心要求之一。以下是几种简洁的解决方案：

方案一：复用React内置的HTML元素属性类型（推荐） #

直接使用React.HTMLAttributes<HTMLDivElement>，它包含了<div>标签的所有原生属性（包括className、style、onClick等），无需手动逐一定义：

import clsx from 'clsx'
import React from 'react'

export function Container({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={clsx('mx-auto max-w-7xl px-4 sm:px-6 lg:px-8', className)}
      {...props}
    />
  )
}

方案二：自定义接口+原生属性合并 #

如果你的组件需要额外的自定义属性，可以先定义专属接口，再和原生div属性合并：

import clsx from 'clsx'
import React from 'react'

interface ContainerProps {
  // 在这里添加你的自定义属性，比如：
  // isFluid?: boolean;
}

export function Container({ className, ...props }: ContainerProps & React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={clsx(
        'mx-auto max-w-7xl px-4 sm:px-6 lg:px-8',
        // 若有自定义属性，可在这里动态拼接类名
        // props.isFluid && 'max-w-none',
        className
      )}
      {...props}
    />
  )
}

方案三：极简类型注解（不推荐） #

如果只是临时快速修复，也可以直接给className和剩余props标注基础类型，但这种方式会丢失原生属性的类型检查，仅适合简单场景：

import clsx from 'clsx'

export function Container({ className, ...props }: { className?: string; [key: string]: any }) {
  return (
    <div
      className={clsx('mx-auto max-w-7xl px-4 sm:px-6 lg:px-8', className)}
      {...props}
    />
  )
}

优先选择方案一，它兼顾了类型安全和开发效率，完全符合React组件的类型规范。

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