#132

garronej · Dec 1, 2022 · 80c4983 · 80c4983
1 parent eca2736
commit 80c4983
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/src/withStyles.tsx b/src/withStyles.tsx
@@ -75,10 +75,20 @@ export function createWithStyles<Theme>(params: {
          * @see https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging
          */
         const name: string | undefined = (() => {
+            {
+                const { name: nameOrWrappedName } = params ?? {};
+
+                if (nameOrWrappedName !== undefined) {
+                    return typeof nameOrWrappedName !== "object"
+                        ? nameOrWrappedName
+                        : Object.keys(nameOrWrappedName)[0];
+                }
+            }
+
             {
                 const displayName = (Component_ as any).displayName;
 
-                if (displayName) {
+                if (typeof displayName === "string" && displayName !== "") {
                     return displayName;
                 }
             }
@@ -90,8 +100,6 @@ export function createWithStyles<Theme>(params: {
                     return name;
                 }
             }
-
-            return params?.name;
         })();
 
         const useStyles = makeStyles<Props, any>({ ...params, name })(

diff --git a/src/withStyles_compat.tsx b/src/withStyles_compat.tsx
@@ -62,10 +62,20 @@ export function createWithStyles<Theme>(params: {
          * @see https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging
          */
         const name: string | undefined = (() => {
+            {
+                const { name: nameOrWrappedName } = params ?? {};
+
+                if (nameOrWrappedName !== undefined) {
+                    return typeof nameOrWrappedName !== "object"
+                        ? nameOrWrappedName
+                        : Object.keys(nameOrWrappedName)[0];
+                }
+            }
+
             {
                 const displayName = (Component_ as any).displayName;
 
-                if (displayName) {
+                if (typeof displayName === "string" && displayName !== "") {
                     return displayName;
                 }
             }
@@ -77,8 +87,6 @@ export function createWithStyles<Theme>(params: {
                     return name;
                 }
             }
-
-            return params?.name;
         })();
 
         const useStyles = makeStyles<Props, any>({ ...params, name })(