Typescript "'className' is missing in props validation" despite being defined #3284
Closed
Description
Description
I am observing 'className' is missing in props validation despite it being correctly specified in the type definition.
React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>- https://github.com/DefinitelyTyped/DefinitelyTyped/blob/90f13b6b5e4ee2db30044f960327e17ed3ef3338/types/react/index.d.ts#L1854
React.HTMLAttributes<HTMLInputElement>.className?: string | undefined
Versions
"@types/react": "^18.0.0",
"eslint": "^8.8.0",
"eslint-plugin-react": "^7.28.0",
"react": "^18.0.0",
"typescript": "^4.5.5"
Example
import React from 'react'
const classNames = (...classes: (false | null | undefined | string)[]) =>
classes.filter(Boolean).join(' ')
export const Input = (
props: React.DetailedHTMLProps<
React.InputHTMLAttributes<HTMLInputElement>,
HTMLInputElement
>
) => (
<input
{...props}
className={classNames(
'class-a',
'class-b',
// eslint-disable-next-line react/prop-types
props.className
)}
/>
)Expected behaviour
The eslint-disable-next-line should not be necessary.
I can also workaround this by adding in & { className?: string } into the type definition of props.
props: React.DetailedHTMLProps<
React.InputHTMLAttributes<HTMLInputElement>,
HTMLInputElement
> & { className?: string }
Activity