diff --git a/src/directives/ripple/index.ts b/src/directives/ripple/index.ts
index c8d614b74083fecf35a735a1618ae37d0761cbb6..c961dc9d159fdddad72410ba1be3d12f856145e8 100644
--- a/src/directives/ripple/index.ts
+++ b/src/directives/ripple/index.ts
@@ -72,9 +72,9 @@ function rippler({
   const rippleContainer = document.createElement('div');
 
   // Styles for ripple
+  ripple.className = 'ripple';
 
   Object.assign(ripple.style ?? {}, {
-    className: 'ripple',
     marginTop: '0px',
     marginLeft: '0px',
     width: '1px',
@@ -88,8 +88,8 @@ function rippler({
   });
 
   // Styles for rippleContainer
+  rippleContainer.className = 'ripple-container';
   Object.assign(rippleContainer.style ?? {}, {
-    className: 'ripple-container',
     position: 'absolute',
     left: `${0 - border}px`,
     top: `${0 - border}px`,