From 51e8d4db1a650e038e2a3681a6a7b2df019dce0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Wed, 14 Jan 2026 16:27:44 +0800
Subject: [PATCH] feat: ColorBlock support inner style

---
 src/components/ColorBlock.tsx | 11 ++++++++++-
 tests/components.test.tsx     | 17 ++++++++++++++++-
 tsconfig.json                 |  2 +-
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/ColorBlock.tsx b/src/components/ColorBlock.tsx
index 7fe7c13..e78b9f3 100644
--- a/src/components/ColorBlock.tsx
+++ b/src/components/ColorBlock.tsx
@@ -6,6 +6,10 @@ export type ColorBlockProps = {
   prefixCls?: string;
   className?: string;
   style?: React.CSSProperties;
+  /** Internal usage. Only used in antd ColorPicker semantic structure only */
+  innerClassName?: string;
+  /** Internal usage. Only used in antd ColorPicker semantic structure only */
+  innerStyle?: React.CSSProperties;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
 };
 
@@ -14,6 +18,8 @@ const ColorBlock: React.FC<ColorBlockProps> = ({
   prefixCls,
   className,
   style,
+  innerClassName,
+  innerStyle,
   onClick,
 }) => {
   const colorBlockCls = `${prefixCls}-color-block`;
@@ -23,7 +29,10 @@ const ColorBlock: React.FC<ColorBlockProps> = ({
       style={style}
       onClick={onClick}
     >
-      <div className={`${colorBlockCls}-inner`} style={{ background: color }} />
+      <div
+        className={clsx(`${colorBlockCls}-inner`, innerClassName)}
+        style={{ background: color, ...innerStyle }}
+      />
     </div>
   );
 };
diff --git a/tests/components.test.tsx b/tests/components.test.tsx
index dedf389..f9ec6f2 100644
--- a/tests/components.test.tsx
+++ b/tests/components.test.tsx
@@ -2,7 +2,7 @@
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import { expect } from 'vitest';
-import ColorPicker, { type BaseSliderProps } from '../src';
+import ColorPicker, { ColorBlock, type BaseSliderProps } from '../src';
 import { defaultColor } from '../src/util';
 
 describe('ColorPicker.Components', () => {
@@ -56,4 +56,19 @@ describe('ColorPicker.Components', () => {
     fireEvent.click(alphaEle);
     expect(alphaEle.textContent).toBe('0/100/33');
   });
+
+  it('ColorBlock support innerClassName and innerStyle', () => {
+    const { container } = render(
+      <ColorBlock
+        prefixCls="test"
+        color="red"
+        innerClassName="my-inner-class"
+        innerStyle={{ color: '#903' }}
+      />,
+    );
+
+    const innerDiv = container.querySelector('.test-color-block-inner');
+    expect(innerDiv).toHaveClass('my-inner-class');
+    expect(innerDiv).toHaveStyle({ color: '#903' });
+  });
 });
diff --git a/tsconfig.json b/tsconfig.json
index 0bf51fb..d1f2092 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,7 +8,7 @@
     "skipLibCheck": true,
     "esModuleInterop": true,
     "module": "ESNext",
-    "types": ["vitest/globals"],
+    "types": ["vitest/globals", "@testing-library/jest-dom"],
     "paths": {
       "@@/*": [".dumi/tmp/*"],
       "@rc-component/color-picker": ["src/index.tsx"]