From 657e8d9d162198e5c812abe6c93cbffa5e9d00ab Mon Sep 17 00:00:00 2001
From: Bervianto Leo Pratama <bervianto.leo@gmail.com>
Date: Fri, 12 Jan 2024 23:38:03 +0700
Subject: [PATCH] fix: initial style didn't give any effect (#2504)

---
 examples/demo/src/components/Default.tsx      |  3 +++
 .../src/ReactMultiCrop/ReactMultiCrop.tsx     | 20 +++++++++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/examples/demo/src/components/Default.tsx b/examples/demo/src/components/Default.tsx
index f7fe81fbe..ee93e6685 100644
--- a/examples/demo/src/components/Default.tsx
+++ b/examples/demo/src/components/Default.tsx
@@ -22,6 +22,9 @@ export default function Default(): JSX.Element {
                 id: "1",
                 rect: { x1: 0.0, y1: 0.0, x2: 0.2, y2: 0.2 },
                 rectPx: {},
+                style: {
+                  borderColor: "green",
+                },
               },
             ],
           }}
diff --git a/packages/react-multi-crop/src/ReactMultiCrop/ReactMultiCrop.tsx b/packages/react-multi-crop/src/ReactMultiCrop/ReactMultiCrop.tsx
index 29c746132..b0e7d41cc 100644
--- a/packages/react-multi-crop/src/ReactMultiCrop/ReactMultiCrop.tsx
+++ b/packages/react-multi-crop/src/ReactMultiCrop/ReactMultiCrop.tsx
@@ -312,6 +312,26 @@ class ReactMultiCrop extends Component<IReactMultiCropProps, IReactMultiCropStat
         };
         let totalRendered = 0;
         for (const coord of inputObject) {
+          if (coord.style) {
+            if (coord.style.cropBackgroundColor) {
+              attribute.cropBackgroundColor = coord.style.cropBackgroundColor;
+            }
+            if (coord.style.cropBackgroundOpacity) {
+              attribute.cropBackgroundOpacity = coord.style.cropBackgroundOpacity;
+            }
+            if (coord.style.borderColor) {
+              attribute.borderColor = coord.style.borderColor;
+            }
+            if (coord.style.cornerColor) {
+              attribute.cornerColor = coord.style.cornerColor;
+            }
+            if (coord.style.cornerSize) {
+              attribute.cornerSize = coord.style.cornerSize;
+            }
+            if (coord.style.transparentCorners) {
+              attribute.transparentCorners = coord.style.transparentCorners;
+            }
+          }
           const rect = this.createObject(canvas, coord, attribute, readonly || false);
           if (rect) {
             canvas.add(rect);