diff --git a/src/views/scrollpanel/ScrollPanelDemo.vue b/src/views/scrollpanel/ScrollPanelDemo.vue
index eea622a72..bbe830c02 100644
--- a/src/views/scrollpanel/ScrollPanelDemo.vue
+++ b/src/views/scrollpanel/ScrollPanelDemo.vue
@@ -85,35 +85,35 @@ export default {
         line-height: 1.5;
         margin: 0;
     }
-}
 
-::v-deep(.custombar1) {
-    .p-scrollpanel-wrapper {
-        border-right: 9px solid var(--surface-b);
-    }
+    &.custombar1 {
+        .p-scrollpanel-wrapper {
+            border-right: 9px solid var(--surface-b);
+        }
 
-    .p-scrollpanel-bar {
-        background-color: var(--primary-color);
-        opacity: 1;
-        transition: background-color .2s;
+        .p-scrollpanel-bar {
+            background-color: var(--primary-color);
+            opacity: 1;
+            transition: background-color .2s;
 
-        &:hover {
-            background-color: #007ad9;
+            &:hover {
+                background-color: #007ad9;
+            }
         }
     }
-}
 
-::v-deep(.custombar2) {
-    .p-scrollpanel-wrapper {
-        border-right: 9px solid var(--surface-b);
-        border-bottom: 9px solid var(--surface-b);
-    }
+    &.custombar2 {
+        .p-scrollpanel-wrapper {
+            border-right: 9px solid var(--surface-b);
+            border-bottom: 9px solid var(--surface-b);
+        }
 
-    .p-scrollpanel-bar {
-        background-color: var(--surface-d);
-        border-radius: 0;
-        opacity: 1;
-        transition: background-color .2s;
-    }
+        .p-scrollpanel-bar {
+            background-color: var(--surface-d);
+            border-radius: 0;
+            opacity: 1;
+            transition: background-color .2s;
+        }
+    }  
 }
 </style>
\ No newline at end of file
diff --git a/src/views/scrollpanel/ScrollPanelDoc.vue b/src/views/scrollpanel/ScrollPanelDoc.vue
index c93857204..dddc890e3 100644
--- a/src/views/scrollpanel/ScrollPanelDoc.vue
+++ b/src/views/scrollpanel/ScrollPanelDoc.vue
@@ -161,36 +161,36 @@ export default {
         line-height: 1.5;
         margin: 0;
     }
-}
 
-::v-deep(.custombar1) {
-    .p-scrollpanel-wrapper {
-        border-right: 9px solid var(--surface-b);
-    }
+    &.custombar1 {
+        .p-scrollpanel-wrapper {
+            border-right: 9px solid var(--surface-b);
+        }
 
-    .p-scrollpanel-bar {
-        background-color: var(--primary-color);
-        opacity: 1;
-        transition: background-color .2s;
+        .p-scrollpanel-bar {
+            background-color: var(--primary-color);
+            opacity: 1;
+            transition: background-color .2s;
 
-        &:hover {
-            background-color: #007ad9;
+            &:hover {
+                background-color: #007ad9;
+            }
         }
     }
-}
 
-::v-deep(.custombar2) {
-    .p-scrollpanel-wrapper {
-        border-right: 9px solid var(--surface-b);
-        border-bottom: 9px solid var(--surface-b);
-    }
+    &.custombar2 {
+        .p-scrollpanel-wrapper {
+            border-right: 9px solid var(--surface-b);
+            border-bottom: 9px solid var(--surface-b);
+        }
 
-    .p-scrollpanel-bar {
-        background-color: var(--surface-d);
-        border-radius: 0;
-        opacity: 1;
-        transition: background-color .2s;
-    }
+        .p-scrollpanel-bar {
+            background-color: var(--surface-d);
+            border-radius: 0;
+            opacity: 1;
+            transition: background-color .2s;
+        }
+    }  
 }
 </CodeHighlight>
 			</TabPanel>