Seems like React.DetailedHTMLProps is a thing we don't have any knowledge of, and we'd have to hardcode support for (probably React.InputHTMLAttributes as well).

I have the same problem

type TDelIconProps = React.HTMLProps<HTMLDivElement>;

const DelIcon: React.FC<TDelIconProps> = ({className, ...rest}) => (
    <div className={classNames('del flex-center', className)} {...rest}>
        <i className="iconfont icon-del f12" />
    </div>
);

ESLint: 'className' is missing in props validation(react/prop-types)

Versions

eslint:7.32.0
eslint-plugin-react:7.30.0

It seems weird to me, but this workaround, using an interface and extending DetailedHTMLAttributes, seems to work:

interface InputProps  extends React.DetailedHTMLProps<
  React.InputHTMLAttributes<HTMLInputElement>,  
  HTMLInputElement
> {}

export const Input = (
  props: InputProps
) => (
  // your code
);

Still broken in 7.33.2

@rwb196884 its not broken, it’s just not something we support yet.

If you import directly from React the error message goes away.

Works:

import type { HTMLAttributes } from "react"
import { cn } from "../../lib/utils"

export function Heading({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("font-semibold text-lg", className)} {...props} />
}

Does not work:

import React from "react"
import { cn } from "../../lib/utils"

export function Heading({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("font-semibold text-lg", className)} {...props} />
}

@divmgl I found the same issue and workaround but I'm completely puzzled about why does that behave that way. Isn't it supposed to import the exact same thing? If you (or anyone) know/s the reason this import behaves like this, I'd like to learn why. Cause right now, seeing this, to me Javascript became broken.

What I'm missing? Do they import different things just because the same thing is imported in different ways?

To be completely clear, I'm referring to this:

import type { HTMLAttributes } from "react"
// ...
export function Heading({ className, ...props }: HTMLAttributes<HTMLDivElement>) {

versus this:

import React from "react"
// ...
export function Heading({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {

I agree that this is a bug; I merely posted the workaround.

I have this issue with shadci generated components , like here:

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
      className,
    )}
    {...props}
  />
));

gives: ESLint: 'className' is missing in props validation(react/prop-types)