diff --git a/packages/color-compact/src/index.tsx b/packages/color-compact/src/index.tsx
index eaa12206e..6689c31bc 100644
--- a/packages/color-compact/src/index.tsx
+++ b/packages/color-compact/src/index.tsx
@@ -19,6 +19,8 @@ export interface CompactProps<T> extends Omit<React.HTMLAttributes<HTMLDivElemen
   onChange?: (color: ColorResult, evn?: T) => void;
   rectRender?: (props: SwatchRectRenderProps) => JSX.Element | undefined;
   rectProps?: SwatchProps['rectProps'];
+  addonBefore?: React.ReactNode;
+  addonAfter?: React.ReactNode;
 }
 
 const COLORS = [
@@ -84,6 +86,8 @@ const Compact = React.forwardRef<HTMLDivElement, CompactProps<React.MouseEvent<H
     colors = COLORS,
     rectProps,
     rectRender,
+    addonBefore,
+    addonAfter,
     ...other
   } = props;
   const hsva = (typeof color === 'string' && validHex(color) ? hexToHsva(color) : color) as HsvaColor;
@@ -128,8 +132,13 @@ const Compact = React.forwardRef<HTMLDivElement, CompactProps<React.MouseEvent<H
           },
         }}
         onChange={(hsvColor) => handleChangeCallback(hsvColor)}
+        addonBefore={addonBefore}
+        addonAfter={addonAfter}
       />
-      <div style={{ display: 'flex', margin: '0 4px 3px 0' }}>
+      <div
+        className={[`${prefixCls}-input-wrapper`, className || ''].filter(Boolean).join(' ')}
+        style={{ display: 'flex', margin: '0 4px 3px 0' }}
+      >
         <EditableInput
           onChange={(evn, val) => handleHex(val, evn)}
           labelStyle={{ paddingRight: 5, marginTop: -1 }}