diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx
index 5c20f7c1a8e..f75ce92ad6d 100644
--- a/core/src/components/picker-column/picker-column.tsx
+++ b/core/src/components/picker-column/picker-column.tsx
@@ -5,6 +5,7 @@ import { getIonMode } from '../../global/ionic-global';
 import type { Gesture, GestureDetail, PickerColumn } from '../../interface';
 import { clamp } from '../../utils/helpers';
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../../utils/native/haptic';
+import { getClassMap } from '../../utils/theme';
 
 /**
  * @internal
@@ -368,6 +369,7 @@ export class PickerColumnCmp implements ComponentInterface {
           'picker-col': true,
           'picker-opts-left': this.col.align === 'left',
           'picker-opts-right': this.col.align === 'right',
+          ...getClassMap(col.cssClass),
         }}
         style={{
           'max-width': this.col.columnWidth,
diff --git a/core/src/components/picker-column/test/picker-column.spec.tsx b/core/src/components/picker-column/test/picker-column.spec.tsx
new file mode 100644
index 00000000000..f072f92c2c1
--- /dev/null
+++ b/core/src/components/picker-column/test/picker-column.spec.tsx
@@ -0,0 +1,17 @@
+import { h } from '@stencil/core';
+import { newSpecPage } from '@stencil/core/testing';
+import { PickerColumnCmp } from '../picker-column';
+
+describe('picker-column', () => {
+  it('should add class to host of component', async () => {
+    const col = { cssClass: 'test-class', options: [] };
+
+    const page = await newSpecPage({
+      components: [PickerColumnCmp],
+      template: () => <ion-picker-column col={col}></ion-picker-column>,
+    });
+
+    const pickerCol = page.body.querySelector('ion-picker-column');
+    expect(pickerCol.classList.contains('test-class')).toBe(true);
+  });
+});