diff --git a/src/Popup/Arrow.tsx b/src/Popup/Arrow.tsx
index d6b82290..a48a16b0 100644
--- a/src/Popup/Arrow.tsx
+++ b/src/Popup/Arrow.tsx
@@ -12,7 +12,7 @@ export interface ArrowProps {
 export default function Arrow(props: ArrowProps) {
   const { prefixCls, align, arrow, arrowPos } = props;
 
-  const { className, content } = arrow || {};
+  const { className, content, style } = arrow || {};
   const { x = 0, y = 0 } = arrowPos;
 
   const arrowRef = React.useRef<HTMLDivElement>(null);
@@ -58,7 +58,7 @@ export default function Arrow(props: ArrowProps) {
     <div
       ref={arrowRef}
       className={classNames(`${prefixCls}-arrow`, className)}
-      style={alignStyle}
+      style={{ ...alignStyle, ...style }}
     >
       {content}
     </div>
diff --git a/src/interface.ts b/src/interface.ts
index 0ff8cfd4..2046f232 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -89,6 +89,7 @@ export interface AlignType {
 }
 
 export interface ArrowTypeOuter {
+  style?: React.CSSProperties;
   className?: string;
   content?: React.ReactNode;
 }
diff --git a/tests/arrow.test.jsx b/tests/arrow.test.jsx
index 19c53b9f..d49087ba 100644
--- a/tests/arrow.test.jsx
+++ b/tests/arrow.test.jsx
@@ -188,6 +188,66 @@ describe('Trigger.Arrow', () => {
       const arrowDom = document.querySelector('.rc-trigger-popup-arrow');
       expect(arrowDom.classList.contains('abc')).toBeTruthy();
     });
+
+    it('arrow style', async () => {
+      render(
+        <Trigger
+          popupVisible
+          popupAlign={{
+            points: ['cl', 'cr'],
+            autoArrow: false,
+          }}
+          popup={<strong>trigger</strong>}
+          arrow={{
+            style: {
+              color: 'red',
+              backgroundColor: 'blue',
+            },
+          }}
+        >
+          <div />
+        </Trigger>,
+      );
+
+      await awaitFakeTimer();
+
+      const arrowDom = document.querySelector('.rc-trigger-popup-arrow');
+      expect(arrowDom).toHaveStyle({
+        color: 'red',
+        backgroundColor: 'blue',
+      });
+    });
+
+    it('arrow style should merge with align style', async () => {
+      render(
+        <Trigger
+          popupVisible
+          popupAlign={{
+            points: ['cl', 'cr'],
+            autoArrow: true,
+          }}
+          popup={<strong>trigger</strong>}
+          arrow={{
+            style: {
+              color: 'red',
+              backgroundColor: 'blue',
+            },
+          }}
+        >
+          <div />
+        </Trigger>,
+      );
+
+      await awaitFakeTimer();
+
+      const arrowDom = document.querySelector('.rc-trigger-popup-arrow');
+      // Should have both align style (left: 0) and custom style
+      expect(arrowDom).toHaveStyle({
+        left: 0,
+        color: 'red',
+        backgroundColor: 'blue',
+      });
+    });
   });
 
   it('content', async () => {