From 08a3c86aa91832e33620eeee5d5055a636dd5290 Mon Sep 17 00:00:00 2001
From: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
Date: Wed, 6 Nov 2024 12:36:41 +0530
Subject: [PATCH] fix(catalog-react) : moving styles under makeStyles

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
---
 .../EntityDisplayName/EntityDisplayName.tsx       | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx b/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx
index 7a00ff3809..3e722efb46 100644
--- a/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx
+++ b/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx
@@ -42,6 +42,10 @@ const useStyles = makeStyles(
         verticalAlign: 'middle',
       },
     },
+    breakTextOverflow: {
+      overflow: 'hidden',
+      wordBreak: 'break-word',
+    },
   }),
   { name: 'CatalogReactEntityDisplayName' },
 );
@@ -77,16 +81,7 @@ export const EntityDisplayName = (
   );
 
   // The innermost "body" content
-  let content = (
-    <div
-      style={{
-        overflow: 'hidden',
-        wordBreak: 'break-word',
-      }}
-    >
-      {primaryTitle}
-    </div>
-  );
+  let content = <div className={classes.breakTextOverflow}>{primaryTitle}</div>;
 
   // Optionally an icon, and wrapper around them both
   content = (