Unknown props: do not warn on React components.

packages/styled-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styled-components",
-  "version": "6.0.3",
+  "version": "6.0.4",
   "description": "CSS for the <Component> Age. Style components your way with speed, strong typing, and flexibility.",
   "types": "dist/index.d.ts",
   "main": "dist/styled-components.cjs.js",

packages/styled-components/src/models/StyledComponent.ts

@@ -25,6 +25,7 @@ import escape from '../utils/escape';
 import generateComponentId from '../utils/generateComponentId';
 import generateDisplayName from '../utils/generateDisplayName';
 import hoist from '../utils/hoist';
+import isDOMElement from '../utils/isDOMElement';
 import isFunction from '../utils/isFunction';
 import isStyledComponent from '../utils/isStyledComponent';
 import isTag from '../utils/isTag';
@@ -151,7 +152,9 @@ function useStyledComponentImpl<Props extends object>(
         !shouldForwardProp &&
         process.env.NODE_ENV === 'development' &&
         !isPropValid(key) &&
-        !seenUnknownProps.has(key)
+        !seenUnknownProps.has(key) &&
+        // Only warn on DOM Element.
+        isDOMElement(elementToBeCreated)
       ) {
         seenUnknownProps.add(key);
         console.warn(

packages/styled-components/src/test/props.test.tsx

@@ -266,5 +266,24 @@ describe('props', () => {
       expect(console.warn).toHaveBeenCalledWith(expect.stringContaining('filterThis'));
       process.env.NODE_ENV = originalEnv;
     });
+
+    it('do not warn in development mode when shouldForwardProp is not provided for an unknown prop on React component', () => {
+      let originalEnv = process.env.NODE_ENV;
+      process.env.NODE_ENV = 'development';
+
+      jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+      const Comp = styled(({ className, myLabel }: { className?: string; myLabel: string }) => (
+        <span className={className}>{myLabel}</span>
+      ))`
+        color: red;
+      `;
+
+      TestRenderer.create(<Comp myLabel="My label" />);
+
+      expect(console.warn).not.toHaveBeenCalledWith(expect.stringContaining('myLabel'));
+      expect(console.warn).toHaveBeenCalledTimes(0);
+      process.env.NODE_ENV = originalEnv;
+    });
   });
 });

packages/styled-components/src/utils/isDOMElement.ts

@@ -0,0 +1,8 @@
+import domElements from './domElements';
+
+/**
+ * Check if `element` is a DOM element.
+ */
+export default function (element: any): element is HTMLElement {
+  return typeof element === 'string' && domElements.has(element as any);
+}

packages/styled-components/src/utils/test/isDOMElement.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import domElements from '../domElements';
+import isDOMElement from '../isDOMElement';
+
+const Comp = () => {
+  return <div>My component</div>;
+};
+
+describe('isDOMElement(something)', () => {
+  it('returns true if its a DOM element', () => {
+    domElements.forEach(element => {
+      expect(isDOMElement(element)).toBe(true);
+    });
+  });
+
+  it('returns false if not', () => {
+    expect(isDOMElement('customtag')).toBe(false);
+    expect(isDOMElement({})).toBe(false);
+    expect(isDOMElement(Comp)).toBe(false);
+    expect(isDOMElement([])).toBe(false);
+  });
+});

yarn.lock

@@ -9084,7 +9084,7 @@ style-loader@^3.3.1:
     supports-color "^5.5.0"
 
 "styled-components@link:packages/styled-components":
-  version "6.0.2"
+  version "6.0.3"
   dependencies:
     "@babel/cli" "^7.21.0"
     "@babel/core" "^7.21.0"