diff --git a/components/lib/themes/primeone/base/treeselect/index.js b/components/lib/themes/primeone/base/treeselect/index.js
index e1cdfbc2c..6b2845a70 100644
--- a/components/lib/themes/primeone/base/treeselect/index.js
+++ b/components/lib/themes/primeone/base/treeselect/index.js
@@ -39,7 +39,7 @@ export default {
     background: ${dt('treeselect.disabled.background')};
 }
 
-.p-treeselect-trigger {
+.p-treeselect-dropdown {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -75,7 +75,7 @@ export default {
     color: ${dt('treeselect.disabled.color')};
 }
 
-.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+.p-inputwrapper-filled.p-treeselect.p-treeselect-display-chip .p-treeselect-label {
     padding: 0.25rem 0.25rem;
 }
 
@@ -84,7 +84,7 @@ export default {
     visibility: hidden;
 }
 
-.p-treeselect-token {
+.p-treeselect-chip {
     cursor: default;
     display: inline-flex;
     align-items: center;
@@ -96,16 +96,16 @@ export default {
     margin-right: 0.25rem;
 }
 
-.p-treeselect-token-icon {
+.p-treeselect-chip-icon {
     cursor: pointer;
     margin-left: 0.375rem;
 }
 
-.p-treeselect .p-treeselect-panel {
+.p-treeselect .p-treeselect-overlay {
     min-width: 100%;
 }
 
-.p-treeselect-panel {
+.p-treeselect-overlay {
     position: absolute;
     top: 0;
     left: 0;
@@ -125,7 +125,7 @@ export default {
     display: flex;
 }
 
-.p-treeselect-panel .p-tree {
+.p-treeselect-overlay .p-tree {
     padding: 0.25rem 0.25rem;
 }
 `
diff --git a/components/lib/treeselect/style/TreeSelectStyle.js b/components/lib/treeselect/style/TreeSelectStyle.js
index 2315ff372..c0a104d85 100644
--- a/components/lib/treeselect/style/TreeSelectStyle.js
+++ b/components/lib/treeselect/style/TreeSelectStyle.js
@@ -8,13 +8,14 @@ const classes = {
     root: ({ instance, props }) => [
         'p-treeselect p-component p-inputwrapper',
         {
-            'p-treeselect-chip': props.display === 'chip',
+            'p-treeselect-display-chip': props.display === 'chip',
             'p-disabled': props.disabled,
             'p-invalid': props.invalid,
             'p-focus': instance.focused,
             'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled',
             'p-inputwrapper-filled': !instance.emptyValue,
-            'p-inputwrapper-focus': instance.focused || instance.overlayVisible
+            'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
+            'p-treeselect-open': instance.overlayVisible
         }
     ],
     labelContainer: 'p-treeselect-label-container',
@@ -25,17 +26,17 @@ const classes = {
             'p-treeselect-label-empty': !props.placeholder && instance.emptyValue
         }
     ],
-    token: 'p-treeselect-token',
-    tokenLabel: 'p-treeselect-token-label',
-    trigger: 'p-treeselect-trigger',
-    triggerIcon: 'p-treeselect-trigger-icon',
+    token: 'p-treeselect-chip',
+    tokenLabel: 'p-treeselect-chip-label',
+    trigger: 'p-treeselect-dropdown',
+    triggerIcon: 'p-treeselect-dropdown-icon',
     panel: ({ instance }) => [
-        'p-treeselect-panel p-component',
+        'p-treeselect-overlay p-component',
         {
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
-    wrapper: 'p-treeselect-items-wrapper',
+    wrapper: 'p-treeselect-tree-container',
     emptyMessage: 'p-treeselect-empty-message'
 };