Converting a .jsx file using Tailwindcss Typescript error

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

you need to provide types for props, so try Container({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) — bogdanoff
– bogdanoff, Commented Sep 27, 2022 at 5:59

Johnny Missile · Accepted Answer · 2022-09-27 08:44:21Z

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

answered Sep 27, 2022 at 8:44

Johnny Missile

2923 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Converting a .jsx file using Tailwindcss Typescript error

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related