diff --git a/lib/util/propTypes.js b/lib/util/propTypes.js index 22063afb8e..84f5479f15 100644 --- a/lib/util/propTypes.js +++ b/lib/util/propTypes.js @@ -645,6 +645,17 @@ module.exports = function propTypesInstructions(context, components, utils) { this.shouldSpecifyOptionalChildrenProps = true; const rightMostName = getRightMostTypeName(node.typeName); + if ( + leftMostName === 'React' + && ( + rightMostName === 'HTMLAttributes' + || rightMostName === 'HTMLElement' + || rightMostName === 'HTMLProps' + ) + ) { + this.shouldSpecifyClassNameProp = true; + } + const importedName = localToImportedMap[rightMostName]; const idx = genericTypeParamIndexWherePropsArePresent[ leftMostName !== rightMostName ? rightMostName : importedName @@ -835,6 +846,14 @@ module.exports = function propTypesInstructions(context, components, utils) { isRequired: false, }; } + if (this.shouldSpecifyClassNameProp) { + this.declaredPropTypes.className = { + fullName: 'className', + name: 'className', + isRequired: false, + }; + } + this.foundDeclaredPropertiesList.forEach((tsInterfaceBody) => { if (tsInterfaceBody && (tsInterfaceBody.type === 'TSPropertySignature' || tsInterfaceBody.type === 'TSMethodSignature')) { let accessor = 'name'; diff --git a/tests/lib/rules/prop-types.js b/tests/lib/rules/prop-types.js index 97206b7d44..638861e2bb 100644 --- a/tests/lib/rules/prop-types.js +++ b/tests/lib/rules/prop-types.js @@ -4195,6 +4195,29 @@ ruleTester.run('prop-types', rule, { ); `, features: ['types'], + }, + { + code: ` + import React from "react" + + export function Heading({ className, ...props }: React.HTMLAttributes) { + return
+ } + `, + features: ['types'], + }, + { + code: ` + import React from 'react'; + type TDelIconProps = React.HTMLProps; + + const DelIcon: React.FC = ({className, ...rest}) => ( +
+ +
+ ); + `, + features: ['types'], } )),