diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue
index ed10c7fd45..f25d53aa0f 100644
--- a/components/lib/basecomponent/BaseComponent.vue
+++ b/components/lib/basecomponent/BaseComponent.vue
@@ -41,6 +41,9 @@ export default {
         }
     },
     methods: {
+        _getHostInstance(instance) {
+            return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined;
+        },
         _getOptionValue(options, key = '', params = {}) {
             const fKeys = ObjectUtils.convertToFlatCase(key).split('.');
             const fKey = fKeys.shift();
@@ -51,10 +54,10 @@ export default {
                     : undefined
                 : ObjectUtils.getItemValue(options, params);
         },
-        _getPTValue(obj = {}, key = '', params = {}) {
+        _getPTValue(obj = {}, key = '', params = {}, searchInDefaultPT = true) {
             const datasetPrefix = 'data-pc-';
             const self = this._getOptionValue(obj, key, params);
-            const globalPT = this._getOptionValue(this.defaultPT, key, params);
+            const globalPT = searchInDefaultPT ? this._getOptionValue(this.defaultPT, key, params) : undefined;
             const merged = mergeProps(self, globalPT, {
                 ...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.convertToFlatCase(this.$.type.name) }),
                 [`${datasetPrefix}section`]: ObjectUtils.convertToFlatCase(key)
@@ -71,13 +74,13 @@ export default {
             return this._getPTValue(this.pt, key, { props: this.$props, state: this.$data, ...params });
         },
         ptmo(obj = {}, key = '', params = {}) {
-            return this._getPTValue(obj, key, params);
+            return this._getPTValue(obj, key, params, false);
         },
         cx(key = '', params = {}) {
             return !this.isUnstyled ? this._getOptionValue(this.$css.classes, key, { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance, ...params }) : undefined;
         },
         cxo(key = '', params = {}) {
-            return !this.isUnstyled ? this._getOptionValue(this.$parentInstance.$parentInstance.$css.classes, key, { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance, ...params }) : undefined;
+            return this.cx(key, params);
         },
         sx(key = '', when = true, params = {}) {
             if (when) {
@@ -90,14 +93,7 @@ export default {
             return undefined;
         },
         sxo(key = '', when = true, params = {}) {
-            if (when) {
-                const self = this._getOptionValue(this.$parentInstance.$parentInstance.$css.inlineStyles, key, { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance, ...params });
-                const base = this._getOptionValue(inlineStyles, key, { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance, ...params });
-
-                return [base, self];
-            }
-
-            return undefined;
+            return this.sx(key, when, params);
         }
     },
     computed: {
@@ -108,7 +104,7 @@ export default {
             return this.unstyled !== undefined ? this.unstyled : this.$primevue.config.unstyled;
         },
         $css() {
-            return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...(this.$parentInstance || {}).$css, ...this.$options.css };
+            return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...(this._getHostInstance(this) || {}).$css, ...this.$options.css };
         }
     }
 };
diff --git a/components/lib/datatable/TableBody.vue b/components/lib/datatable/TableBody.vue
index 272ba13077..654e2e697d 100755
--- a/components/lib/datatable/TableBody.vue
+++ b/components/lib/datatable/TableBody.vue
@@ -125,6 +125,7 @@ import BodyCell from './BodyCell.vue';
 
 export default {
     name: 'TableBody',
+    hostName: 'DataTable',
     extends: BaseComponent,
     emits: [
         'rowgroup-toggle',
diff --git a/components/lib/datatable/TableHeader.vue b/components/lib/datatable/TableHeader.vue
index 6ba3cb1477..84e466a620 100755
--- a/components/lib/datatable/TableHeader.vue
+++ b/components/lib/datatable/TableHeader.vue
@@ -137,6 +137,7 @@ import HeaderCheckbox from './HeaderCheckbox.vue';
 
 export default {
     name: 'TableHeader',
+    hostName: 'DataTable',
     extends: BaseComponent,
     emits: [
         'column-click',