使用 Tailwindcss Typescript 错误转换 a.jsx 文件

Question

I copy an example code from the Tailwind sight. When I changed the file to a.tsx I get an error with the className.

Do I need to define a type

What do I need to do to make the error go away?

Binding element 'className' implicitly has an 'any' type.

import clsx from 'clsx'

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

Answer 1

import clsx from 'clsx'

interface ContainerProps {
    className: string
}

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