From fc65d2ef882e8e3297a508448bb9139a6af1417b Mon Sep 17 00:00:00 2001
From: AykutSarac <aykutsarac0@gmail.com>
Date: Sat, 27 Aug 2022 19:19:07 +0300
Subject: [PATCH] fix styled-components class

---
 src/components/CustomNode/ObjectNode.tsx |  2 +-
 src/components/CustomNode/styles.tsx     | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/CustomNode/ObjectNode.tsx b/src/components/CustomNode/ObjectNode.tsx
index 695e007..690e159 100644
--- a/src/components/CustomNode/ObjectNode.tsx
+++ b/src/components/CustomNode/ObjectNode.tsx
@@ -22,7 +22,7 @@ const ObjectNode: React.FC<CustomNodeProps<[string, string][]>> = ({
               data-x={x}
               data-y={y}
               key={idx}
-              width={width}
+              width={`${width - 20}px`}
               value={JSON.stringify(val[1])}
             >
               <Styled.StyledKey objectKey>
diff --git a/src/components/CustomNode/styles.tsx b/src/components/CustomNode/styles.tsx
index 10e8fc6..4640446 100644
--- a/src/components/CustomNode/styles.tsx
+++ b/src/components/CustomNode/styles.tsx
@@ -83,12 +83,19 @@ export const StyledKey = styled.span<{
   font-size: ${({ parent }) => parent && "14px"};
 `;
 
-export const StyledRow = styled.span<{ width: number; value: string }>`
+export const StyledRow = styled.span.attrs<{
+  width: string;
+  value: string;
+  theme: DefaultTheme;
+}>((props) => ({
+  style: {
+    width: props.width,
+    color: getTypeColor(props.value, props.theme),
+  },
+}))<{ width: string; value: string; theme: DefaultTheme }>`
   height: 18px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   padding: 0 auto;
-  width: ${({ width }) => `${width - 20}px`};
-  color: ${({ theme, value }) => getTypeColor(value, theme)};
 `;