diff --git a/components/lib/base/style/BaseStyle.js b/components/lib/base/style/BaseStyle.js
index e558f0181..a5e77a3a3 100644
--- a/components/lib/base/style/BaseStyle.js
+++ b/components/lib/base/style/BaseStyle.js
@@ -200,31 +200,6 @@ const theme = ({ dt }) => `
         background-color: transparent;
     }
 }
-
-.p-ripple {
-    overflow: hidden;
-    position: relative;
-}
-
-.p-ink {
-    display: block;
-    position: absolute;
-    background: rgba(255, 255, 255, 0.5);
-    border-radius: 100%;
-    transform: scale(0);
-    pointer-events: none;
-}
-
-.p-ink-active {
-    animation: ripple 0.4s linear;
-}
-
-@keyframes ripple {
-    100% {
-        opacity: 0;
-        transform: scale(2.5);
-    }
-}
 `;
 
 const css = ({ dt }) => `
diff --git a/components/lib/ripple/style/RippleStyle.js b/components/lib/ripple/style/RippleStyle.js
index d6367d9f5..5a8902ae1 100644
--- a/components/lib/ripple/style/RippleStyle.js
+++ b/components/lib/ripple/style/RippleStyle.js
@@ -1,10 +1,38 @@
 import BaseStyle from 'primevue/base/style';
 
+const theme = ({ dt }) => `
+.p-ripple {
+    overflow: hidden;
+    position: relative;
+}
+
+.p-ink {
+    display: block;
+    position: absolute;
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: 100%;
+    transform: scale(0);
+    pointer-events: none;
+}
+
+.p-ink-active {
+    animation: ripple 0.4s linear;
+}
+
+@keyframes ripple {
+    100% {
+        opacity: 0;
+        transform: scale(2.5);
+    }
+}
+`;
+
 const classes = {
     root: 'p-ink'
 };
 
 export default BaseStyle.extend({
     name: 'ripple-directive',
+    theme,
     classes
 });