From 751295c7551291d964ba27911e5e8cf4b7cb7344 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Tue, 30 May 2023 14:06:57 +0300
Subject: [PATCH] Refactor #3965 - Update Base components

---
 .../lib/contextmenu/BaseContextMenu.vue       | 28 +++++-----
 components/lib/contextmenu/ContextMenuSub.vue | 38 ++++++-------
 components/lib/editor/BaseEditor.vue          | 16 +++---
 .../lib/inputnumber/BaseInputNumber.vue       | 16 +++---
 .../lib/inputswitch/BaseInputSwitch.vue       | 16 +++---
 components/lib/inputtext/BaseInputText.vue    | 16 +++---
 components/lib/knob/BaseKnob.vue              | 16 +++---
 components/lib/listbox/BaseListbox.vue        | 16 +++---
 components/lib/megamenu/BaseMegaMenu.vue      | 38 +++++++------
 components/lib/megamenu/MegaMenuSub.vue       | 54 ++++++++-----------
 components/lib/menu/BaseMenu.vue              | 26 +++++----
 components/lib/menu/Menuitem.vue              | 30 +++++------
 components/lib/menubar/BaseMenubar.vue        | 30 +++++------
 components/lib/menubar/MenubarSub.vue         | 46 ++++++----------
 .../lib/multiselect/BaseMultiSelect.vue       | 16 +++---
 components/lib/panelmenu/BasePanelMenu.vue    | 26 +++++----
 components/lib/panelmenu/PanelMenuList.vue    | 12 ++---
 components/lib/panelmenu/PanelMenuSub.vue     | 40 ++++++--------
 components/lib/password/BasePassword.vue      | 16 +++---
 components/lib/splitter/BaseSplitter.vue      | 16 +++---
 .../lib/splitterpanel/BaseSplitterPanel.vue   | 16 +++---
 components/lib/tabview/BaseTabView.vue        | 16 +++---
 components/lib/tieredmenu/BaseTieredMenu.vue  | 30 +++++------
 components/lib/tieredmenu/TieredMenuSub.vue   | 46 ++++++----------
 components/lib/tree/BaseTree.vue              | 16 +++---
 components/lib/tree/TreeNode.vue              |  4 +-
 components/lib/treeselect/BaseTreeSelect.vue  | 16 +++---
 27 files changed, 279 insertions(+), 377 deletions(-)

diff --git a/components/lib/contextmenu/BaseContextMenu.vue b/components/lib/contextmenu/BaseContextMenu.vue
index e62cfe3ce..616be7cd8 100644
--- a/components/lib/contextmenu/BaseContextMenu.vue
+++ b/components/lib/contextmenu/BaseContextMenu.vue
@@ -54,20 +54,20 @@ const classes = {
         }
     ],
     menu: 'p-contextmenu-root-list',
-    menuitem: ({ context, processedItem }) => [
+    menuitem: ({ instance, processedItem }) => [
         'p-menuitem',
         {
-            'p-menuitem-active p-highlight': context.isItemActive(processedItem),
-            'p-focus': context.isItemFocused(processedItem),
-            'p-disabled': context.isItemDisabled(processedItem)
+            'p-menuitem-active p-highlight': instance.isItemActive(processedItem),
+            'p-focus': instance.isItemFocused(processedItem),
+            'p-disabled': instance.isItemDisabled(processedItem)
         }
     ],
     content: 'p-menuitem-content',
-    action: ({ context, isActive, isExactActive }) => [
+    action: ({ instance, isActive, isExactActive }) => [
         'p-menuitem-link',
         {
             'router-link-active': isActive,
-            'router-link-active-exact': context.exact && isExactActive
+            'router-link-active-exact': instance.exact && isExactActive
         }
     ],
     icon: 'p-menuitem-icon',
@@ -77,7 +77,7 @@ const classes = {
     separator: 'p-menuitem-separator'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_contextmenu_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_contextmenu_style', manual: true });
 
 export default {
     name: 'BaseContextMenu',
@@ -121,15 +121,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && loadStyle();
-            }
-        }
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>
diff --git a/components/lib/contextmenu/ContextMenuSub.vue b/components/lib/contextmenu/ContextMenuSub.vue
index 5d3d41fa5..58f1600b3 100755
--- a/components/lib/contextmenu/ContextMenuSub.vue
+++ b/components/lib/contextmenu/ContextMenuSub.vue
@@ -6,7 +6,7 @@
                     v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
                     :id="getItemId(processedItem)"
                     :style="getItemProp(processedItem, 'style')"
-                    :class="[getCXOptions('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
+                    :class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
                     role="menuitem"
                     :aria-label="getItemLabel(processedItem)"
                     :aria-disabled="isItemDisabled(processedItem) || undefined"
@@ -20,22 +20,22 @@
                     :data-p-focused="isItemFocused(processedItem)"
                     :data-p-disabled="isItemDisabled(processedItem)"
                 >
-                    <div :class="getCXOptions('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
+                    <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
                         <template v-if="!templates.item">
                             <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
-                                <a v-ripple :href="href" :class="getCXOptions('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
-                                    <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
-                                    <span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                                    <span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                                <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
+                                    <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
+                                    <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                                    <span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                                 </a>
                             </router-link>
-                            <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getCXOptions('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
-                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
-                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                                <span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                            <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                                <span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                                 <template v-if="getItemProp(processedItem, 'items')">
-                                    <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="getCXOptions('submenuIcon')" />
-                                    <AngleRightIcon v-else :class="getCXOptions('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuicon')" />
+                                    <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" />
+                                    <AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuicon')" />
                                 </template>
                             </a>
                         </template>
@@ -45,7 +45,7 @@
                         v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
                         :id="getItemId(processedItem) + '_list'"
                         role="menu"
-                        :class="getCXOptions('submenu')"
+                        :class="cx('submenu')"
                         :menuId="menuId"
                         :focusedItemId="focusedItemId"
                         :items="processedItem.items"
@@ -64,7 +64,7 @@
                     v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
                     :id="getItemId(processedItem)"
                     :style="getItemProp(processedItem, 'style')"
-                    :class="[getCXOptions('separator'), getItemProp(processedItem, 'class')]"
+                    :class="[cx('separator'), getItemProp(processedItem, 'class')]"
                     role="separator"
                     v-bind="ptm('separator')"
                 ></li>
@@ -74,14 +74,14 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import AngleRightIcon from 'primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
-import BaseContextMenu from './BaseContextMenu.vue';
 
 export default {
     name: 'ContextMenuSub',
-    extends: BaseContextMenu,
+    extends: BaseComponent,
     emits: ['item-click', 'item-mouseenter'],
     props: {
         items: {
@@ -146,12 +146,6 @@ export default {
                 }
             });
         },
-        getCXOptions(key, params) {
-            return this.cx(key, {
-                ...params,
-                context: this
-            });
-        },
         isItemActive(processedItem) {
             return this.activeItemPath.some((path) => path.key === processedItem.key);
         },
diff --git a/components/lib/editor/BaseEditor.vue b/components/lib/editor/BaseEditor.vue
index b92e9b6e9..8b1df978c 100644
--- a/components/lib/editor/BaseEditor.vue
+++ b/components/lib/editor/BaseEditor.vue
@@ -970,7 +970,7 @@ const classes = {
     content: 'p-editor-content'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_editor_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_editor_style', manual: true });
 
 export default {
     name: 'BaseEditor',
@@ -984,15 +984,13 @@ export default {
         modules: null
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && loadStyle();
-            }
-        }
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>
diff --git a/components/lib/inputnumber/BaseInputNumber.vue b/components/lib/inputnumber/BaseInputNumber.vue
index f16bbb392..2ea01ddf0 100644
--- a/components/lib/inputnumber/BaseInputNumber.vue
+++ b/components/lib/inputnumber/BaseInputNumber.vue
@@ -132,7 +132,7 @@ const classes = {
     ]
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_inputnumber_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_inputnumber_style', manual: true });
 
 export default {
     name: 'BaseInputNumber',
@@ -276,15 +276,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && loadStyle();
-            }
-        }
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>
diff --git a/components/lib/inputswitch/BaseInputSwitch.vue b/components/lib/inputswitch/BaseInputSwitch.vue
index ca7ee7e64..a78a88906 100644
--- a/components/lib/inputswitch/BaseInputSwitch.vue
+++ b/components/lib/inputswitch/BaseInputSwitch.vue
@@ -41,7 +41,7 @@ const classes = {
     slider: 'p-inputswitch-slider'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_inputswitch_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_inputswitch_style', manual: true });
 
 export default {
     name: 'BaseInputSwitch',
@@ -90,15 +90,13 @@ export default {
     },
     css: {
         classes,
-        inlineStyles
+        inlineStyles,
+        loadStyle
     },
-    watch: {
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && loadStyle();
-            }
-        }
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>
diff --git a/components/lib/inputtext/BaseInputText.vue b/components/lib/inputtext/BaseInputText.vue
index edce7469d..b23b1f2be 100644
--- a/components/lib/inputtext/BaseInputText.vue
+++ b/components/lib/inputtext/BaseInputText.vue
@@ -116,7 +116,7 @@ const classes = {
     root: ({ instance }) => ['p-inputtext p-component', { 'p-filled': instance.filled }]
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_inputtext_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_inputtext_style', manual: true });
 
 export default {
     name: 'BaseInputText',
@@ -125,15 +125,13 @@ export default {
         modelValue: null
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && loadStyle();
-            }
-        }
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>
diff --git a/components/lib/knob/BaseKnob.vue b/components/lib/knob/BaseKnob.vue
index 7c0ab9b33..2a70e2e0c 100644
--- a/components/lib/knob/BaseKnob.vue
+++ b/components/lib/knob/BaseKnob.vue
@@ -30,7 +30,7 @@ const classes = {
     label: 'p-knob-text'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_knob_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_knob_style', manual: true });
 
 export default {
     name: 'BaseKnob',
@@ -102,15 +102,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && loadStyle();
-            }
-        }
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>
diff --git a/components/lib/listbox/BaseListbox.vue b/components/lib/listbox/BaseListbox.vue
index f9f0524e2..e033c6657 100644
--- a/components/lib/listbox/BaseListbox.vue
+++ b/components/lib/listbox/BaseListbox.vue
@@ -69,7 +69,7 @@ const classes = {
     hiddenLastFocusableEl: 'p-hidden-accessible p-hidden-focusable'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_listbox_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_listbox_style', manual: true });
 
 export default {
     name: 'BaseListbox',
@@ -149,15 +149,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && loadStyle();
-            }
-        }
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>
diff --git a/components/lib/megamenu/BaseMegaMenu.vue b/components/lib/megamenu/BaseMegaMenu.vue
index ffcaf69db..fc956baba 100644
--- a/components/lib/megamenu/BaseMegaMenu.vue
+++ b/components/lib/megamenu/BaseMegaMenu.vue
@@ -116,7 +116,7 @@ const styles = `
 `;
 
 const inlineStyles = {
-    submenu: ({ context, processedItem }) => ({ display: context.isItemActive(processedItem) ? 'block' : 'none' })
+    submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
 };
 
 const classes = {
@@ -129,26 +129,26 @@ const classes = {
     ],
     start: 'p-megamenu-start',
     menu: 'p-megamenu-root-list',
-    submenuHeader: ({ context, processedItem }) => [
+    submenuHeader: ({ instance, processedItem }) => [
         'p-megamenu-submenu-header p-submenu-header',
         {
-            'p-disabled': context.isItemDisabled(processedItem)
+            'p-disabled': instance.isItemDisabled(processedItem)
         }
     ],
-    menuitem: ({ context, processedItem }) => [
+    menuitem: ({ instance, processedItem }) => [
         'p-menuitem',
         {
-            'p-menuitem-active p-highlight': context.isItemActive(processedItem),
-            'p-focus': context.isItemFocused(processedItem),
-            'p-disabled': context.isItemDisabled(processedItem)
+            'p-menuitem-active p-highlight': instance.isItemActive(processedItem),
+            'p-focus': instance.isItemFocused(processedItem),
+            'p-disabled': instance.isItemDisabled(processedItem)
         }
     ],
     content: 'p-menuitem-content',
-    action: ({ context, isActive, isExactActive }) => [
+    action: ({ instance, isActive, isExactActive }) => [
         'p-menuitem-link',
         {
             'router-link-active': isActive,
-            'router-link-active-exact': context.exact && isExactActive
+            'router-link-active-exact': instance.exact && isExactActive
         }
     ],
     icon: 'p-menuitem-icon',
@@ -156,8 +156,8 @@ const classes = {
     submenuIcon: 'p-submenu-icon',
     panel: 'p-megamenu-panel',
     grid: 'p-megamenu-grid',
-    column: ({ context, processedItem }) => {
-        let length = context.isItemGroup(processedItem) ? processedItem.items.length : 0;
+    column: ({ instance, processedItem }) => {
+        let length = instance.isItemGroup(processedItem) ? processedItem.items.length : 0;
         let columnClass;
 
         switch (length) {
@@ -189,7 +189,7 @@ const classes = {
     end: 'p-megamenu-end'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_megamenu_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_megamenu_style', manual: true });
 
 export default {
     name: 'BaseMegaMenu',
@@ -226,15 +226,13 @@ export default {
     },
     css: {
         classes,
-        inlineStyles
+        inlineStyles,
+        loadStyle
     },
-    watch: {
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && loadStyle();
-            }
-        }
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>
diff --git a/components/lib/megamenu/MegaMenuSub.vue b/components/lib/megamenu/MegaMenuSub.vue
index 21868e3e2..6e2898457 100644
--- a/components/lib/megamenu/MegaMenuSub.vue
+++ b/components/lib/megamenu/MegaMenuSub.vue
@@ -1,12 +1,12 @@
 <template>
-    <ul :class="level === 0 ? getCXOptions('menu') : getCXOptions('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
-        <li v-if="submenu" :class="[getCXOptions('submenuHeader', { submenu }), getItemProp(submenu, 'class')]" :style="getItemProp(submenu, 'style')" role="presentation" v-bind="ptm('submenuHeader')">{{ getItemLabel(submenu) }}</li>
+    <ul :class="level === 0 ? cx('menu') : cx('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
+        <li v-if="submenu" :class="[cx('submenuHeader', { submenu }), getItemProp(submenu, 'class')]" :style="getItemProp(submenu, 'style')" role="presentation" v-bind="ptm('submenuHeader')">{{ getItemLabel(submenu) }}</li>
         <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
             <li
                 v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
                 :id="getItemId(processedItem)"
                 :style="getItemProp(processedItem, 'style')"
-                :class="[getCXOptions('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
+                :class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
                 role="menuitem"
                 :aria-label="getItemLabel(processedItem)"
                 :aria-disabled="isItemDisabled(processedItem) || undefined"
@@ -20,35 +20,35 @@
                 :data-p-focused="isItemFocused(processedItem)"
                 :data-p-disabled="isItemDisabled(processedItem)"
             >
-                <div :class="getCXOptions('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
+                <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
                     <template v-if="!templates.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
-                            <a v-ripple :href="href" :class="getCXOptions('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
-                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
-                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                                <span :class="getCXOptions('text')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                            <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                                <span :class="cx('text')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
-                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getCXOptions('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
-                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
-                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                            <span :class="getCXOptions('text')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
+                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                            <span :class="cx('text')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                             <template v-if="isItemGroup(processedItem)">
-                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="getCXOptions('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
-                                <component v-else :is="horizontal ? 'AngleDownIcon' : 'AngleRightIcon'" :class="getCXOptions('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <component v-else :is="horizontal ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
                             </template>
                         </a>
                     </template>
                     <component v-else :is="templates.item" :item="processedItem.item"></component>
                 </div>
-                <div v-if="isItemVisible(processedItem) && isItemGroup(processedItem)" :class="getCXOptions('panel')" v-bind="ptm('panel')">
-                    <div :class="getCXOptions('grid')" v-bind="ptm('grid')">
-                        <div v-for="col of processedItem.items" :key="getItemKey(col)" :class="getCXOptions('column', { processedItem })" v-bind="ptm('column')">
+                <div v-if="isItemVisible(processedItem) && isItemGroup(processedItem)" :class="cx('panel')" v-bind="ptm('panel')">
+                    <div :class="cx('grid')" v-bind="ptm('grid')">
+                        <div v-for="col of processedItem.items" :key="getItemKey(col)" :class="cx('column', { processedItem })" v-bind="ptm('column')">
                             <MegaMenuSub
                                 v-for="submenu of col"
                                 :key="getSubListKey(submenu)"
                                 :id="getSubListId(submenu)"
-                                :style="getSXOptions('submenu', { processedItem })"
+                                :style="sx('submenu', true, { processedItem })"
                                 role="menu"
                                 :menuId="menuId"
                                 :focusedItemId="focusedItemId"
@@ -68,7 +68,7 @@
             <li
                 v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
                 :id="getItemId(processedItem)"
-                :class="[getCXOptions('separator'), getItemProp(processedItem, 'class')]"
+                :class="[cx('separator'), getItemProp(processedItem, 'class')]"
                 :style="getItemProp(processedItem, 'style')"
                 role="separator"
                 v-bind="ptm('separator')"
@@ -78,15 +78,15 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import AngleDownIcon from 'primevue/icons/angledown';
 import AngleRightIcon from 'primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
 import { ObjectUtils } from 'primevue/utils';
-import BaseMegaMenu from './BaseMegaMenu.vue';
 
 export default {
     name: 'MegaMenuSub',
-    extends: BaseMegaMenu,
+    extends: BaseComponent,
     emits: ['item-click', 'item-mouseenter'],
     props: {
         menuId: {
@@ -157,18 +157,6 @@ export default {
                 }
             });
         },
-        getCXOptions(key, params) {
-            return this.cx(key, {
-                ...params,
-                context: this
-            });
-        },
-        getSXOptions(key, params) {
-            return this.sx(key, true, {
-                ...params,
-                context: this
-            });
-        },
         isItemActive(processedItem) {
             return ObjectUtils.isNotEmpty(this.activeItem) ? this.activeItem.key === processedItem.key : false;
         },
diff --git a/components/lib/menu/BaseMenu.vue b/components/lib/menu/BaseMenu.vue
index 9bcc3d4f9..ba5d34558 100644
--- a/components/lib/menu/BaseMenu.vue
+++ b/components/lib/menu/BaseMenu.vue
@@ -37,26 +37,26 @@ const classes = {
     submenuHeader: 'p-submenu-header',
     separator: 'p-menuitem-separator',
     end: 'p-menu-end',
-    menuitem: ({ context }) => [
+    menuitem: ({ instance }) => [
         'p-menuitem',
         {
-            'p-focus': context.id === context.focusedOptionId,
-            'p-disabled': context.disabled()
+            'p-focus': instance.id === instance.focusedOptionId,
+            'p-disabled': instance.disabled()
         }
     ],
     content: 'p-menuitem-content',
-    action: ({ context, isActive, isExactActive }) => [
+    action: ({ instance, isActive, isExactActive }) => [
         'p-menuitem-link',
         {
             'router-link-active': isActive,
-            'router-link-active-exact': context.exact && isExactActive
+            'router-link-active-exact': instance.exact && isExactActive
         }
     ],
     icon: 'p-menuitem-icon',
     label: 'p-menuitem-text'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_menu_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_menu_style', manual: true });
 
 export default {
     name: 'BaseMenu',
@@ -100,15 +100,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && loadStyle();
-            }
-        }
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>
diff --git a/components/lib/menu/Menuitem.vue b/components/lib/menu/Menuitem.vue
index 9bd715539..f8842586d 100644
--- a/components/lib/menu/Menuitem.vue
+++ b/components/lib/menu/Menuitem.vue
@@ -2,7 +2,7 @@
     <li
         v-if="visible()"
         :id="id"
-        :class="[getCXOptions('menuitem'), item.class]"
+        :class="[cx('menuitem'), item.class]"
         role="menuitem"
         :style="item.style"
         :aria-label="label()"
@@ -11,19 +11,19 @@
         :data-p-focused="isItemFocused()"
         :data-p-disabled="disabled() || false"
     >
-        <div :class="getCXOptions('content')" @click="onItemClick($event)" v-bind="getPTOptions('content')">
+        <div :class="cx('content')" @click="onItemClick($event)" v-bind="getPTOptions('content')">
             <template v-if="!templates.item">
                 <router-link v-if="item.to && !disabled()" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
-                    <a v-ripple :href="href" :class="getCXOptions('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions('action')">
-                        <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="[getCXOptions('icon'), item.icon]" />
-                        <span v-else-if="item.icon" :class="[getCXOptions('icon'), item.icon]" v-bind="getPTOptions('icon')" />
-                        <span :class="getCXOptions('label')" v-bind="getPTOptions('label')">{{ label() }}</span>
+                    <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions('action')">
+                        <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="[cx('icon'), item.icon]" />
+                        <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon')" />
+                        <span :class="cx('label')" v-bind="getPTOptions('label')">{{ label() }}</span>
                     </a>
                 </router-link>
-                <a v-else v-ripple :href="item.url" :class="getCXOptions('action')" :target="item.target" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action')">
-                    <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="[getCXOptions('icon'), item.icon]" />
-                    <span v-else-if="item.icon" :class="[getCXOptions('icon'), item.icon]" v-bind="getPTOptions('icon')" />
-                    <span :class="getCXOptions('label')" v-bind="getPTOptions('label')">{{ label() }}</span>
+                <a v-else v-ripple :href="item.url" :class="cx('action')" :target="item.target" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action')">
+                    <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="[cx('icon'), item.icon]" />
+                    <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon')" />
+                    <span :class="cx('label')" v-bind="getPTOptions('label')">{{ label() }}</span>
                 </a>
             </template>
             <component v-else :is="templates.item" :item="item"></component>
@@ -32,13 +32,13 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 import { ObjectUtils } from 'primevue/utils';
-import BaseMenu from './BaseMenu.vue';
 
 export default {
     name: 'Menuitem',
-    extends: BaseMenu,
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['item-click'],
     props: {
@@ -59,12 +59,6 @@ export default {
                 }
             });
         },
-        getCXOptions(key, params) {
-            return this.cx(key, {
-                ...params,
-                context: this
-            });
-        },
         isItemFocused() {
             return this.focusedOptionId === this.id;
         },
diff --git a/components/lib/menubar/BaseMenubar.vue b/components/lib/menubar/BaseMenubar.vue
index 812516254..21748a6b6 100644
--- a/components/lib/menubar/BaseMenubar.vue
+++ b/components/lib/menubar/BaseMenubar.vue
@@ -77,7 +77,7 @@ const styles = `
 `;
 
 const inlineStyles = {
-    submenu: ({ context, processedItem }) => ({ display: context.isItemActive(processedItem) ? 'block' : 'none' })
+    submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
 };
 
 const classes = {
@@ -90,20 +90,20 @@ const classes = {
     start: 'p-menubar-start',
     button: 'p-menubar-button',
     menu: 'p-menubar-root-list',
-    menuitem: ({ context, processedItem }) => [
+    menuitem: ({ instance, processedItem }) => [
         'p-menuitem',
         {
-            'p-menuitem-active p-highlight': context.isItemActive(processedItem),
-            'p-focus': context.isItemFocused(processedItem),
-            'p-disabled': context.isItemDisabled(processedItem)
+            'p-menuitem-active p-highlight': instance.isItemActive(processedItem),
+            'p-focus': instance.isItemFocused(processedItem),
+            'p-disabled': instance.isItemDisabled(processedItem)
         }
     ],
     content: 'p-menuitem-content',
-    action: ({ context, isActive, isExactActive }) => [
+    action: ({ instance, isActive, isExactActive }) => [
         'p-menuitem-link',
         {
             'router-link-active': isActive,
-            'router-link-active-exact': context.exact && isExactActive
+            'router-link-active-exact': instance.exact && isExactActive
         }
     ],
     icon: 'p-menuitem-icon',
@@ -114,7 +114,7 @@ const classes = {
     end: 'p-menubar-end'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_menubar_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_menubar_style', manual: true });
 
 export default {
     name: 'BaseMenubar',
@@ -143,15 +143,13 @@ export default {
     },
     css: {
         classes,
-        inlineStyles
+        inlineStyles,
+        loadStyle
     },
-    watch: {
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && loadStyle();
-            }
-        }
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>
diff --git a/components/lib/menubar/MenubarSub.vue b/components/lib/menubar/MenubarSub.vue
index 526c5dafd..331f002ec 100755
--- a/components/lib/menubar/MenubarSub.vue
+++ b/components/lib/menubar/MenubarSub.vue
@@ -1,11 +1,11 @@
 <template>
-    <ul :class="level === 0 ? getCXOptions('menu') : getCXOptions('submenu')" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
+    <ul :class="level === 0 ? cx('menu') : cx('submenu')" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
         <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
             <li
                 v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
                 :id="getItemId(processedItem)"
                 :style="getItemProp(processedItem, 'style')"
-                :class="[getCXOptions('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
+                :class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
                 role="menuitem"
                 :aria-label="getItemLabel(processedItem)"
                 :aria-disabled="isItemDisabled(processedItem) || undefined"
@@ -19,22 +19,22 @@
                 :data-p-focused="isItemFocused(processedItem)"
                 :data-p-disabled="isItemDisabled(processedItem)"
             >
-                <div :class="getCXOptions('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
+                <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
                     <template v-if="!templates.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
-                            <a v-ripple :href="href" :class="getCXOptions('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
-                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
-                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                                <span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                            <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                                <span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
-                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getCXOptions('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
-                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
-                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                            <span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
+                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                            <span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                             <template v-if="getItemProp(processedItem, 'items')">
-                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :root="root" :active="isItemActive(processedItem)" :class="getCXOptions('submenuIcon')" />
-                                <component v-else :is="root ? 'AngleDownIcon' : 'AngleRightIcon'" :class="getCXOptions('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :root="root" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" />
+                                <component v-else :is="root ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
                             </template>
                         </a>
                     </template>
@@ -44,7 +44,7 @@
                     v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
                     :menuId="menuId"
                     role="menu"
-                    :style="getSXOptions('submenu', { processedItem })"
+                    :style="sx('submenu', true, { processedItem })"
                     :focusedItemId="focusedItemId"
                     :items="processedItem.items"
                     :mobileActive="mobileActive"
@@ -60,7 +60,7 @@
             <li
                 v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
                 :id="getItemId(processedItem)"
-                :class="[getCXOptions('separator'), getItemProp(processedItem, 'class')]"
+                :class="[cx('separator'), getItemProp(processedItem, 'class')]"
                 :style="getItemProp(processedItem, 'style')"
                 role="separator"
                 v-bind="ptm('separator')"
@@ -70,15 +70,15 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import AngleDownIcon from 'primevue/icons/angledown';
 import AngleRightIcon from 'primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
 import { ObjectUtils } from 'primevue/utils';
-import BaseMenubar from './BaseMenubar.vue';
 
 export default {
     name: 'MenubarSub',
-    extends: BaseMenubar,
+    extends: BaseComponent,
     emits: ['item-mouseenter', 'item-click'],
     props: {
         items: {
@@ -144,18 +144,6 @@ export default {
                 }
             });
         },
-        getCXOptions(key, params) {
-            return this.cx(key, {
-                ...params,
-                context: this
-            });
-        },
-        getSXOptions(key, params) {
-            return this.sx(key, true, {
-                ...params,
-                context: this
-            });
-        },
         isItemActive(processedItem) {
             return this.activeItemPath.some((path) => path.key === processedItem.key);
         },
diff --git a/components/lib/multiselect/BaseMultiSelect.vue b/components/lib/multiselect/BaseMultiSelect.vue
index 86d96f2ed..3321a837f 100644
--- a/components/lib/multiselect/BaseMultiSelect.vue
+++ b/components/lib/multiselect/BaseMultiSelect.vue
@@ -192,7 +192,7 @@ const classes = {
     hiddenLastFocusableEl: 'p-hidden-accessible p-hidden-focusable'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_multiselect_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_multiselect_style', manual: true });
 
 export default {
     name: 'BaseMultiSelect',
@@ -358,15 +358,13 @@ export default {
     },
     css: {
         classes,
-        inlineStyles
+        inlineStyles,
+        loadStyle
     },
-    watch: {
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && loadStyle();
-            }
-        }
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>
diff --git a/components/lib/panelmenu/BasePanelMenu.vue b/components/lib/panelmenu/BasePanelMenu.vue
index 7695c9a84..e160fcc68 100644
--- a/components/lib/panelmenu/BasePanelMenu.vue
+++ b/components/lib/panelmenu/BasePanelMenu.vue
@@ -60,19 +60,19 @@ const classes = {
     toggleableContent: 'p-toggleable-content',
     menuContent: 'p-panelmenu-content',
     menu: 'p-panelmenu-root-list',
-    menuitem: ({ context, processedItem }) => [
+    menuitem: ({ instance, processedItem }) => [
         'p-menuitem',
         {
-            'p-focus': context.isItemFocused(processedItem),
-            'p-disabled': context.isItemDisabled(processedItem)
+            'p-focus': instance.isItemFocused(processedItem),
+            'p-disabled': instance.isItemDisabled(processedItem)
         }
     ],
     content: 'p-menuitem-content',
-    action: ({ context, isActive, isExactActive }) => [
+    action: ({ instance, isActive, isExactActive }) => [
         'p-menuitem-link',
         {
             'router-link-active': isActive,
-            'router-link-active-exact': context.exact && isExactActive
+            'router-link-active-exact': instance.exact && isExactActive
         }
     ],
     icon: 'p-menuitem-icon',
@@ -82,7 +82,7 @@ const classes = {
     separator: 'p-menuitem-separator'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_panelmenu_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_panelmenu_style', manual: true });
 
 export default {
     name: 'BasePanelMenu',
@@ -106,15 +106,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && loadStyle();
-            }
-        }
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>
diff --git a/components/lib/panelmenu/PanelMenuList.vue b/components/lib/panelmenu/PanelMenuList.vue
index 90d58180b..f68315812 100644
--- a/components/lib/panelmenu/PanelMenuList.vue
+++ b/components/lib/panelmenu/PanelMenuList.vue
@@ -1,7 +1,7 @@
 <template>
     <PanelMenuSub
         :id="panelId + '_list'"
-        :class="getCXOptions('menu')"
+        :class="cx('menu')"
         role="tree"
         :tabindex="-1"
         :aria-activedescendant="focused ? focusedItemId : undefined"
@@ -21,13 +21,13 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
-import BasePanelMenu from './BasePanelMenu.vue';
 import PanelMenuSub from './PanelMenuSub.vue';
 
 export default {
     name: 'PanelMenuList',
-    extends: BasePanelMenu,
+    extends: BaseComponent,
     emits: ['item-toggle', 'header-focus'],
     props: {
         panelId: {
@@ -75,12 +75,6 @@ export default {
         getItemLabel(processedItem) {
             return this.getItemProp(processedItem, 'label');
         },
-        getCXOptions(key, params) {
-            return this.cx(key, {
-                ...params,
-                context: this
-            });
-        },
         isItemVisible(processedItem) {
             return this.getItemProp(processedItem, 'visible') !== false;
         },
diff --git a/components/lib/panelmenu/PanelMenuSub.vue b/components/lib/panelmenu/PanelMenuSub.vue
index d4c34165d..c8f0d5981 100755
--- a/components/lib/panelmenu/PanelMenuSub.vue
+++ b/components/lib/panelmenu/PanelMenuSub.vue
@@ -1,10 +1,10 @@
 <template>
-    <ul :class="getCXOptions('submenu')" :tabindex="tabindex">
+    <ul :class="cx('submenu')" :tabindex="tabindex">
         <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
             <li
                 v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
                 :id="getItemId(processedItem)"
-                :class="[getCXOptions('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
+                :class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
                 :style="getItemProp(processedItem, 'style')"
                 role="treeitem"
                 :aria-label="getItemLabel(processedItem)"
@@ -16,29 +16,29 @@
                 :data-p-focused="isItemFocused(processedItem)"
                 :data-p-disabled="isItemDisabled(processedItem)"
             >
-                <div :class="getCXOptions('content')" @click="onItemClick($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
+                <div :class="cx('content')" @click="onItemClick($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
                     <template v-if="!templates.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
-                            <a v-ripple :href="href" :class="getCXOptions('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
-                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
-                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                                <span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                            <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                                <span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
-                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getCXOptions('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
+                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
                             <template v-if="isItemGroup(processedItem)">
-                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :class="getCXOptions('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
-                                <component v-else :is="isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="getCXOptions('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :class="cx('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <component v-else :is="isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
                             </template>
-                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
-                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                            <span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                            <span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                         </a>
                     </template>
                     <component v-else :is="templates.item" :item="processedItem.item"></component>
                 </div>
                 <transition name="p-toggleable-content">
-                    <div v-show="isItemActive(processedItem)" :class="getCXOptions('toggleableContent')" v-bind="ptm('toggleableContent')">
+                    <div v-show="isItemActive(processedItem)" :class="cx('toggleableContent')" v-bind="ptm('toggleableContent')">
                         <PanelMenuSub
                             v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
                             :id="getItemId(processedItem) + '_list'"
@@ -60,7 +60,7 @@
             <li
                 v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
                 :style="getItemProp(processedItem, 'style')"
-                :class="[getCXOptions('separator'), getItemProp(processedItem, 'class')]"
+                :class="[cx('separator'), getItemProp(processedItem, 'class')]"
                 role="separator"
                 v-bind="ptm('separator')"
             ></li>
@@ -69,15 +69,15 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import ChevronRightIcon from 'primevue/icons/chevronright';
 import Ripple from 'primevue/ripple';
 import { ObjectUtils } from 'primevue/utils';
-import BasePanelMenu from './BasePanelMenu.vue';
 
 export default {
     name: 'PanelMenuSub',
-    extends: BasePanelMenu,
+    extends: BaseComponent,
     emits: ['item-toggle'],
     props: {
         panelId: {
@@ -134,12 +134,6 @@ export default {
                 }
             });
         },
-        getCXOptions(key, params) {
-            return this.cx(key, {
-                ...params,
-                context: this
-            });
-        },
         isItemActive(processedItem) {
             return this.activeItemPath.some((path) => path.key === processedItem.key);
         },
diff --git a/components/lib/password/BasePassword.vue b/components/lib/password/BasePassword.vue
index 7b162199d..158df3ee8 100644
--- a/components/lib/password/BasePassword.vue
+++ b/components/lib/password/BasePassword.vue
@@ -63,7 +63,7 @@ const classes = {
     info: 'p-password-info'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_password_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_password_style', manual: true });
 
 export default {
     name: 'BasePassword',
@@ -169,15 +169,13 @@ export default {
     },
     css: {
         classes,
-        inlineStyles
+        inlineStyles,
+        loadStyle
     },
-    watch: {
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && loadStyle();
-            }
-        }
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>
diff --git a/components/lib/splitter/BaseSplitter.vue b/components/lib/splitter/BaseSplitter.vue
index 23ae66e6b..c64bf6fc3 100644
--- a/components/lib/splitter/BaseSplitter.vue
+++ b/components/lib/splitter/BaseSplitter.vue
@@ -60,7 +60,7 @@ const inlineStyles = {
     root: ({ props }) => [{ display: 'flex', 'flex-wrap': 'nowrap' }, props.layout === 'vertical' ? { 'flex-direction': 'column' } : '']
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_splitter_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_splitter_style', manual: true });
 
 export default {
     name: 'BaseSplitter',
@@ -89,15 +89,13 @@ export default {
     },
     css: {
         classes,
-        inlineStyles
+        inlineStyles,
+        loadStyle
     },
-    watch: {
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && loadStyle();
-            }
-        }
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>
diff --git a/components/lib/splitterpanel/BaseSplitterPanel.vue b/components/lib/splitterpanel/BaseSplitterPanel.vue
index a263b579d..3bc9f1ff1 100644
--- a/components/lib/splitterpanel/BaseSplitterPanel.vue
+++ b/components/lib/splitterpanel/BaseSplitterPanel.vue
@@ -21,7 +21,7 @@ const classes = {
     root: ({ instance }) => ['p-splitter-panel', { 'p-splitter-panel-nested': instance.isNested }]
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_splitterpanel_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_splitterpanel_style', manual: true });
 
 export default {
     name: 'BaseSplitterPanel',
@@ -37,15 +37,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && loadStyle();
-            }
-        }
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>
diff --git a/components/lib/tabview/BaseTabView.vue b/components/lib/tabview/BaseTabView.vue
index 0c14fe487..8088dd9c5 100644
--- a/components/lib/tabview/BaseTabView.vue
+++ b/components/lib/tabview/BaseTabView.vue
@@ -103,7 +103,7 @@ const classes = {
     panelContainer: 'p-tabview-panels'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_tabview_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_tabview_style', manual: true });
 
 export default {
     name: 'BaseTabView',
@@ -147,15 +147,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && loadStyle();
-            }
-        }
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>
diff --git a/components/lib/tieredmenu/BaseTieredMenu.vue b/components/lib/tieredmenu/BaseTieredMenu.vue
index c5a775491..bb352fbdb 100644
--- a/components/lib/tieredmenu/BaseTieredMenu.vue
+++ b/components/lib/tieredmenu/BaseTieredMenu.vue
@@ -45,7 +45,7 @@ const styles = `
 `;
 
 const inlineStyles = {
-    submenu: ({ context, processedItem }) => ({ display: context.isItemActive(processedItem) ? 'block' : 'none' })
+    submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
 };
 
 const classes = {
@@ -58,20 +58,20 @@ const classes = {
         }
     ],
     menu: 'p-tieredmenu-root-list',
-    menuitem: ({ context, processedItem }) => [
+    menuitem: ({ instance, processedItem }) => [
         'p-menuitem',
         {
-            'p-menuitem-active p-highlight': context.isItemActive(processedItem),
-            'p-focus': context.isItemFocused(processedItem),
-            'p-disabled': context.isItemDisabled(processedItem)
+            'p-menuitem-active p-highlight': instance.isItemActive(processedItem),
+            'p-focus': instance.isItemFocused(processedItem),
+            'p-disabled': instance.isItemDisabled(processedItem)
         }
     ],
     content: 'p-menuitem-content',
-    action: ({ context, isActive, isExactActive }) => [
+    action: ({ instance, isActive, isExactActive }) => [
         'p-menuitem-link',
         {
             'router-link-active': isActive,
-            'router-link-active-exact': context.exact && isExactActive
+            'router-link-active-exact': instance.exact && isExactActive
         }
     ],
     icon: 'p-menuitem-icon',
@@ -81,7 +81,7 @@ const classes = {
     separator: 'p-menuitem-separator'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_tieredmenu_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_tieredmenu_style', manual: true });
 
 export default {
     name: 'BaseTieredMenu',
@@ -130,15 +130,13 @@ export default {
     },
     css: {
         classes,
-        inlineStyles
+        inlineStyles,
+        loadStyle
     },
-    watch: {
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && loadStyle();
-            }
-        }
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>
diff --git a/components/lib/tieredmenu/TieredMenuSub.vue b/components/lib/tieredmenu/TieredMenuSub.vue
index ff877f392..b3a7a7a80 100755
--- a/components/lib/tieredmenu/TieredMenuSub.vue
+++ b/components/lib/tieredmenu/TieredMenuSub.vue
@@ -1,11 +1,11 @@
 <template>
-    <ul :class="level === 0 ? getCXOptions('menu') : getCXOptions('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
+    <ul :class="level === 0 ? cx('menu') : cx('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
         <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
             <li
                 v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
                 :id="getItemId(processedItem)"
                 :style="getItemProp(processedItem, 'style')"
-                :class="[getCXOptions('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
+                :class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
                 role="menuitem"
                 :aria-label="getItemLabel(processedItem)"
                 :aria-disabled="isItemDisabled(processedItem) || undefined"
@@ -19,22 +19,22 @@
                 :data-p-focused="isItemFocused(processedItem)"
                 :data-p-disabled="isItemDisabled(processedItem)"
             >
-                <div :class="getCXOptions('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
+                <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
                     <template v-if="!templates.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
-                            <a v-ripple :href="href" :class="getCXOptions('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
-                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
-                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                                <span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                            <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                                <span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
-                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getCXOptions('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
-                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
-                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                            <span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
+                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                            <span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                             <template v-if="getItemProp(processedItem, 'items')">
-                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :class="getCXOptions('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
-                                <AngleRightIcon v-else :class="getCXOptions('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :class="cx('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
                             </template>
                         </a>
                     </template>
@@ -43,7 +43,7 @@
                 <TieredMenuSub
                     v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
                     :id="getItemId(processedItem) + '_list'"
-                    :style="getSXOptions('submenu', { processedItem })"
+                    :style="sx('submenu', true, { processedItem })"
                     role="menu"
                     :menuId="menuId"
                     :focusedItemId="focusedItemId"
@@ -61,7 +61,7 @@
                 v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
                 :id="getItemId(processedItem)"
                 :style="getItemProp(processedItem, 'style')"
-                :class="[getCXOptions('separator'), getItemProp(processedItem, 'class')]"
+                :class="[cx('separator'), getItemProp(processedItem, 'class')]"
                 role="separator"
                 v-bind="ptm('separator')"
             ></li>
@@ -70,14 +70,14 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import AngleRightIcon from 'primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
 import { ObjectUtils } from 'primevue/utils';
-import BaseTieredMenu from './BaseTieredMenu.vue';
 
 export default {
     name: 'TieredMenuSub',
-    extends: BaseTieredMenu,
+    extends: BaseComponent,
     emits: ['item-click', 'item-mouseenter'],
     props: {
         menuId: {
@@ -134,18 +134,6 @@ export default {
                 }
             });
         },
-        getCXOptions(key, params) {
-            return this.cx(key, {
-                ...params,
-                context: this
-            });
-        },
-        getSXOptions(key, params) {
-            return this.sx(key, true, {
-                ...params,
-                context: this
-            });
-        },
         isItemActive(processedItem) {
             return this.activeItemPath.some((path) => path.key === processedItem.key);
         },
diff --git a/components/lib/tree/BaseTree.vue b/components/lib/tree/BaseTree.vue
index e427d2534..edb10ceae 100644
--- a/components/lib/tree/BaseTree.vue
+++ b/components/lib/tree/BaseTree.vue
@@ -127,7 +127,7 @@ const classes = {
     subgroup: 'p-context-children'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_tree_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_tree_style', manual: true });
 
 export default {
     name: 'BaseTree',
@@ -199,15 +199,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && loadStyle();
-            }
-        }
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>
diff --git a/components/lib/tree/TreeNode.vue b/components/lib/tree/TreeNode.vue
index b219f4e9c..c628d9ffa 100755
--- a/components/lib/tree/TreeNode.vue
+++ b/components/lib/tree/TreeNode.vue
@@ -53,17 +53,17 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import CheckIcon from 'primevue/icons/check';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import ChevronRightIcon from 'primevue/icons/chevronright';
 import MinusIcon from 'primevue/icons/minus';
 import Ripple from 'primevue/ripple';
 import { DomHandler } from 'primevue/utils';
-import BaseTree from './BaseTree.vue';
 
 export default {
     name: 'TreeNode',
-    extends: BaseTree,
+    extends: BaseComponent,
     emits: ['node-toggle', 'node-click', 'checkbox-change'],
     props: {
         node: {
diff --git a/components/lib/treeselect/BaseTreeSelect.vue b/components/lib/treeselect/BaseTreeSelect.vue
index fe42ddd1c..bfd548b75 100644
--- a/components/lib/treeselect/BaseTreeSelect.vue
+++ b/components/lib/treeselect/BaseTreeSelect.vue
@@ -94,7 +94,7 @@ const classes = {
     emptyMessage: 'p-treeselect-empty-message'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_treeselect_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_treeselect_style', manual: true });
 
 export default {
     name: 'BaseTreeSelect',
@@ -173,15 +173,13 @@ export default {
     },
     css: {
         classes,
-        inlineStyles
+        inlineStyles,
+        loadStyle
     },
-    watch: {
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && loadStyle();
-            }
-        }
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>