diff --git a/packages/primevue/src/colorpicker/BaseColorPicker.vue b/packages/primevue/src/colorpicker/BaseColorPicker.vue
index 1b1743209..d03f9e73c 100644
--- a/packages/primevue/src/colorpicker/BaseColorPicker.vue
+++ b/packages/primevue/src/colorpicker/BaseColorPicker.vue
@@ -46,7 +46,8 @@ export default {
type: String,
default: null
},
- panelClass: null
+ panelClass: null,
+ overlayClass: null
},
style: ColorPickerStyle,
provide() {
diff --git a/packages/primevue/src/colorpicker/ColorPicker.d.ts b/packages/primevue/src/colorpicker/ColorPicker.d.ts
index fbacac8ea..a29b9b748 100755
--- a/packages/primevue/src/colorpicker/ColorPicker.d.ts
+++ b/packages/primevue/src/colorpicker/ColorPicker.d.ts
@@ -77,7 +77,7 @@ export interface ColorPickerPassThroughOptions {
/**
* Used to pass attributes to the panel's DOM element.
*/
- panel?: ColorPickerPassThroughOptionType;
+ overlay?: ColorPickerPassThroughOptionType;
/**
* Used to pass attributes to the content's DOM element.
*/
@@ -179,8 +179,13 @@ export interface ColorPickerProps {
inputId?: string | undefined;
/**
* Style class of the overlay panel.
+ * @deprecated since v4.0. Use 'overlayClass' prop instead.
*/
panelClass?: any;
+ /**
+ * Style class of the overlay panel.
+ */
+ overlayClass?: any;
/**
* A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself.
* @defaultValue body
diff --git a/packages/primevue/src/colorpicker/ColorPicker.vue b/packages/primevue/src/colorpicker/ColorPicker.vue
index 360b8568c..9427192eb 100755
--- a/packages/primevue/src/colorpicker/ColorPicker.vue
+++ b/packages/primevue/src/colorpicker/ColorPicker.vue
@@ -3,7 +3,7 @@
-