diff --git a/components/lib/common/Common.css b/components/lib/common/Common.css
deleted file mode 100644
index 2581f78c6b..0000000000
--- a/components/lib/common/Common.css
+++ /dev/null
@@ -1,171 +0,0 @@
-.p-component, .p-component * {
-    box-sizing: border-box;
-}
-
-.p-hidden {
-    display: none;
-}
-
-.p-hidden-space {
-    visibility: hidden;
-}
-
-.p-hidden-accessible {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-}
-
-.p-hidden-accessible input,
-.p-hidden-accessible select {
-    transform: scale(0);
-}
-
-.p-reset {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    outline: 0;
-    text-decoration: none;
-    font-size: 100%;
-    list-style: none;
-}
-
-.p-disabled, .p-disabled * {
-    cursor: default !important;
-    pointer-events: none;
-    user-select: none;
-}
-
-.p-component-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.p-overflow-hidden {
-    overflow: hidden;
-}
-
-.p-unselectable-text {
-    user-select: none;
-}
-
-.p-scrollbar-measure {
-    width: 100px;
-    height: 100px;
-    overflow: scroll;
-    position: absolute;
-    top: -9999px;
-}
-
-@-webkit-keyframes p-fadein {
-  0%   { opacity: 0; }
-  100% { opacity: 1; }
-}
-@keyframes p-fadein {
-  0%   { opacity: 0; }
-  100% { opacity: 1; }
-}
-
-.p-link {
-	text-align: left;
-	background-color: transparent;
-	margin: 0;
-	padding: 0;
-	border: none;
-    cursor: pointer;
-    user-select: none;
-}
-
-.p-link:disabled {
-	cursor: default;
-}
-
-/* Non react overlay animations */
-.p-connected-overlay {
-    opacity: 0;
-    transform: scaleY(0.8);
-    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-}
-
-.p-connected-overlay-visible {
-    opacity: 1;
-    transform: scaleY(1);
-}
-
-.p-connected-overlay-hidden {
-    opacity: 0;
-    transform: scaleY(1);
-    transition: opacity .1s linear;
-}
-
-/* React based overlay animations */
-.p-connected-overlay-enter {
-    opacity: 0;
-    transform: scaleY(0.8);
-}
-
-.p-connected-overlay-enter-active {
-    opacity: 1;
-    transform: scaleY(1);
-    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-}
-
-.p-connected-overlay-enter-done {
-    transform: none;
-}
-
-.p-connected-overlay-exit {
-    opacity: 1;
-}
-
-.p-connected-overlay-exit-active {
-    opacity: 0;
-    transition: opacity .1s linear;
-}
-
-/* Toggleable Content */
-.p-toggleable-content-enter {
-    max-height: 0;
-}
-
-.p-toggleable-content-enter-active {
-    overflow: hidden;
-    max-height: 1000px;
-    transition: max-height 1s ease-in-out;
-}
-
-.p-toggleable-content-enter-done {
-    transform: none;
-}
-
-.p-toggleable-content-exit {
-    max-height: 1000px;
-}
-
-.p-toggleable-content-exit-active {
-    overflow: hidden;
-    max-height: 0;
-    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
-}
-
-.p-sr-only {
-    border: 0;
-    clip: rect(1px, 1px, 1px, 1px);
-    clip-path: inset(50%);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-    word-wrap: normal !important;
-}
diff --git a/components/lib/componentbase/ComponentBase.js b/components/lib/componentbase/ComponentBase.js
index 6162c5a63e..2eb23df6e8 100644
--- a/components/lib/componentbase/ComponentBase.js
+++ b/components/lib/componentbase/ComponentBase.js
@@ -233,10 +233,30 @@ const baseStyles = `
     box-sizing: border-box;
 }
 
+.p-hidden {
+    display: none;
+}
+
 .p-hidden-space {
     visibility: hidden;
 }
 
+.p-hidden-accessible {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+
+.p-hidden-accessible input,
+.p-hidden-accessible select {
+    transform: scale(0);
+}
+
 .p-reset {
     margin: 0;
     padding: 0;
@@ -261,21 +281,29 @@ const baseStyles = `
     height: 100%;
 }
 
+.p-overflow-hidden {
+    overflow: hidden;
+}
+
 .p-unselectable-text {
     user-select: none;
 }
 
-.p-sr-only {
-    border: 0;
-    clip: rect(1px, 1px, 1px, 1px);
-    clip-path: inset(50%);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
+.p-scrollbar-measure {
+    width: 100px;
+    height: 100px;
+    overflow: scroll;
     position: absolute;
-    width: 1px;
-    word-wrap: normal !important;
+    top: -9999px;
+}
+
+@-webkit-keyframes p-fadein {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}
+@keyframes p-fadein {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
 }
 
 .p-link {
@@ -292,7 +320,7 @@ const baseStyles = `
 	cursor: default;
 }
 
-/* Non vue overlay animations */
+/* Non react overlay animations */
 .p-connected-overlay {
     opacity: 0;
     transform: scaleY(0.8);
@@ -310,43 +338,67 @@ const baseStyles = `
     transition: opacity .1s linear;
 }
 
-/* Vue based overlay animations */
-.p-connected-overlay-enter-from {
+/* React based overlay animations */
+.p-connected-overlay-enter {
     opacity: 0;
     transform: scaleY(0.8);
 }
 
-.p-connected-overlay-leave-to {
-    opacity: 0;
-}
-
 .p-connected-overlay-enter-active {
+    opacity: 1;
+    transform: scaleY(1);
     transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
 }
 
-.p-connected-overlay-leave-active {
+.p-connected-overlay-enter-done {
+    transform: none;
+}
+
+.p-connected-overlay-exit {
+    opacity: 1;
+}
+
+.p-connected-overlay-exit-active {
+    opacity: 0;
     transition: opacity .1s linear;
 }
 
 /* Toggleable Content */
-.p-toggleable-content-enter-from,
-.p-toggleable-content-leave-to {
+.p-toggleable-content-enter {
     max-height: 0;
 }
 
-.p-toggleable-content-enter-to,
-.p-toggleable-content-leave-from {
+.p-toggleable-content-enter-active {
+    overflow: hidden;
+    max-height: 1000px;
+    transition: max-height 1s ease-in-out;
+}
+
+.p-toggleable-content-enter-done {
+    transform: none;
+}
+
+.p-toggleable-content-exit {
     max-height: 1000px;
 }
 
-.p-toggleable-content-leave-active {
+.p-toggleable-content-exit-active {
     overflow: hidden;
+    max-height: 0;
     transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
 }
 
-.p-toggleable-content-enter-active {
+.p-sr-only {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
     overflow: hidden;
-    transition: max-height 1s ease-in-out;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    word-wrap: normal !important;
 }
 
 .p-menu .p-menuitem-link {
@@ -487,7 +539,7 @@ export const ComponentBase = {
     }
 };
 
-export const useHandleStyle = (styles, isUnstyled, { name, styled = false }) => {
+export const useHandleStyle = (styles, isUnstyled = false, { name, styled = false }) => {
     const { load: loadCommonStyle, unload: unloadCommonStyle } = useStyle(baseStyles, { name: 'common', manual: true });
     const { load, unload } = useStyle(styles, { name: name, manual: true });
 
diff --git a/components/lib/virtualscroller/VirtualScroller.css b/components/lib/virtualscroller/VirtualScroller.css
deleted file mode 100644
index d6a089baeb..0000000000
--- a/components/lib/virtualscroller/VirtualScroller.css
+++ /dev/null
@@ -1,55 +0,0 @@
-.p-virtualscroller {
-    position: relative;
-    overflow: auto;
-    contain: strict;
-    transform: translateZ(0);
-    will-change: scroll-position;
-    outline: 0 none;
-}
-
-.p-virtualscroller-content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    /*contain: content;*/
-    min-height: 100%;
-    min-width: 100%;
-    will-change: transform;
-}
-
-.p-virtualscroller-spacer {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 1px;
-    width: 1px;
-    transform-origin: 0 0;
-    pointer-events: none;
-}
-
-.p-virtualscroller-loader {
-    position: sticky;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.p-virtualscroller-loader.p-component-overlay {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.p-virtualscroller-loading-icon {
-    font-size: 2rem;
-}
-
-.p-virtualscroller-horizontal > .p-virtualscroller-content {
-    display: flex;
-}
-
-/* Inline */
-.p-virtualscroller-inline .p-virtualscroller-content {
-    position: static;
-}
diff --git a/components/lib/virtualscroller/VirtualScroller.js b/components/lib/virtualscroller/VirtualScroller.js
index fe716689f1..a0dbe5c99d 100644
--- a/components/lib/virtualscroller/VirtualScroller.js
+++ b/components/lib/virtualscroller/VirtualScroller.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEventListener, useMountEffect, usePrevious, useResizeListener, useUpdateEffect } from '../hooks/Hooks';
+import { useEventListener, useMountEffect, usePrevious, useResizeListener, useStyle, useUpdateEffect } from '../hooks/Hooks';
 import { classNames, DomHandler, ObjectUtils, IconUtils, mergeProps } from '../utils/Utils';
 import { VirtualScrollerBase } from './VirtualScrollerBase';
 import { SpinnerIcon } from '../icons/spinner';
@@ -34,6 +34,8 @@ export const VirtualScroller = React.memo(
                 loaderArr: loaderArrState
             }
         });
+
+        useStyle(VirtualScrollerBase.css.styles, { name: 'virtualscroller' })
         const elementRef = React.useRef(null);
         const contentRef = React.useRef(null);
         const spacerRef = React.useRef(null);
diff --git a/components/lib/virtualscroller/VirtualScrollerBase.js b/components/lib/virtualscroller/VirtualScrollerBase.js
index b023f91913..37b4db9333 100644
--- a/components/lib/virtualscroller/VirtualScrollerBase.js
+++ b/components/lib/virtualscroller/VirtualScrollerBase.js
@@ -1,5 +1,63 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
 
+const styles = `
+.p-virtualscroller {
+    position: relative;
+    overflow: auto;
+    contain: strict;
+    transform: translateZ(0);
+    will-change: scroll-position;
+    outline: 0 none;
+}
+
+.p-virtualscroller-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    /*contain: content;*/
+    min-height: 100%;
+    min-width: 100%;
+    will-change: transform;
+}
+
+.p-virtualscroller-spacer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 1px;
+    width: 1px;
+    transform-origin: 0 0;
+    pointer-events: none;
+}
+
+.p-virtualscroller-loader {
+    position: sticky;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.p-virtualscroller-loader.p-component-overlay {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-virtualscroller-loading-icon {
+    font-size: 2rem;
+}
+
+.p-virtualscroller-horizontal > .p-virtualscroller-content {
+    display: flex;
+}
+
+/* Inline */
+.p-virtualscroller-inline .p-virtualscroller-content {
+    position: static;
+}
+`; 
+
 export const VirtualScrollerBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'VirtualScroller',
@@ -35,5 +93,8 @@ export const VirtualScrollerBase = ComponentBase.extend({
         onScrollIndexChange: null,
         onLazyLoad: null,
         children: undefined
+    },
+    css: {
+        styles
     }
 });
diff --git a/styles/primereact.css b/styles/primereact.css
index 7d95066be9..ba33b6f843 100644
--- a/styles/primereact.css
+++ b/styles/primereact.css
@@ -1,5 +1,2 @@
-@import "../components/lib/common/Common.css";
 @import "../components/lib/iconbase/IconBase.css";
-@import "../components/lib/tooltip/Tooltip.css";
 @import "../components/lib/ripple/Ripple.css";
-@import "../components/lib/virtualscroller/VirtualScroller.css";
\ No newline at end of file