diff --git a/components/lib/basecomponent/style/BaseComponentStyle.js b/components/lib/basecomponent/style/BaseComponentStyle.js
index 2837804e998..632553a1bb2 100644
--- a/components/lib/basecomponent/style/BaseComponentStyle.js
+++ b/components/lib/basecomponent/style/BaseComponentStyle.js
@@ -247,7 +247,7 @@ const css = `
 }
 
 .p-disabled, .p-disabled * {
-    cursor: default !important;
+    cursor: default;
     pointer-events: none;
     user-select: none;
 }
@@ -274,7 +274,7 @@ const css = `
     padding: 0;
     position: absolute;
     width: 1px;
-    word-wrap: normal !important;
+    word-wrap: normal;
 }
 
 .p-link {
diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
index a09039c0d39..8bcdc9962d5 100755
--- a/components/lib/calendar/Calendar.vue
+++ b/components/lib/calendar/Calendar.vue
@@ -2685,14 +2685,14 @@ export default {
                         let { breakpoint, numMonths } = responsiveOptions[i];
                         let styles = `
                             .p-datepicker[${this.attributeSelector}] .p-datepicker-group:nth-child(${numMonths}) .p-datepicker-next {
-                                display: inline-flex !important;
+                                display: inline-flex;
                             }
                         `;
 
                         for (let j = numMonths; j < this.numberOfMonths; j++) {
                             styles += `
                                 .p-datepicker[${this.attributeSelector}] .p-datepicker-group:nth-child(${j + 1}) {
-                                    display: none !important;
+                                    display: none;
                                 }
                             `;
                         }
diff --git a/components/lib/cascadeselect/style/CascadeSelectStyle.js b/components/lib/cascadeselect/style/CascadeSelectStyle.js
index e1efbe54d00..2a010b2526f 100644
--- a/components/lib/cascadeselect/style/CascadeSelectStyle.js
+++ b/components/lib/cascadeselect/style/CascadeSelectStyle.js
@@ -74,7 +74,7 @@ const css = `
     }
 
     .p-cascadeselect-item-active {
-        overflow: visible !important;
+        overflow: visible;
     }
 
     .p-cascadeselect-item-active > .p-cascadeselect-sublist {
diff --git a/components/lib/confirmdialog/ConfirmDialog.d.ts b/components/lib/confirmdialog/ConfirmDialog.d.ts
index 1013e88bd7d..5e47f885fcb 100644
--- a/components/lib/confirmdialog/ConfirmDialog.d.ts
+++ b/components/lib/confirmdialog/ConfirmDialog.d.ts
@@ -137,7 +137,7 @@ export interface ConfirmDialogBreakpoints {
      *
      * @media screen and (max-width: ${breakpoint[key]}) {
      *      .p-dialog[attributeSelector] {
-     *          width: ${breakpoint[value]} !important;
+     *          width: ${breakpoint[value]};
      *      }
      * }
      */
diff --git a/components/lib/datatable/DataTable.vue b/components/lib/datatable/DataTable.vue
index 38d8fc9018a..c6d000f3d06 100755
--- a/components/lib/datatable/DataTable.vue
+++ b/components/lib/datatable/DataTable.vue
@@ -1307,7 +1307,7 @@ export default {
 
             widths.forEach((width, index) => {
                 let colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
-                let style = `width: ${colWidth}px !important; max-width: ${colWidth}px !important`;
+                let style = `width: ${colWidth}px; max-width: ${colWidth}px`;
 
                 innerHTML += `
                     ${selector} > thead[data-pc-section="thead"] > tr > th:nth-child(${index + 1}),
@@ -1763,7 +1763,7 @@ export default {
                     let selector = `[data-pc-name="datatable"][${this.attributeSelector}] > [data-pc-section="wrapper"] ${this.virtualScrollerDisabled ? '' : '> [data-pc-section="virtualscroller"]'} > table[data-pc-section="table"]`;
 
                     widths.forEach((width, index) => {
-                        let style = `width: ${width}px !important; max-width: ${width}px !important`;
+                        let style = `width: ${width}px; max-width: ${width}px`;
 
                         innerHTML += `
                             ${selector} > thead[data-pc-section="thead"] > tr > th:nth-child(${index + 1}),
@@ -1902,12 +1902,12 @@ export default {
 @media screen and (max-width: ${this.breakpoint}) {
     ${selector} > .p-datatable-thead > tr > th,
     ${selector} > .p-datatable-tfoot > tr > td {
-        display: none !important;
+        display: none;
     }
 
     ${selector} > .p-datatable-tbody > tr > td {
         display: flex;
-        width: 100% !important;
+        width: 100%;
         align-items: center;
         justify-content: space-between;
     }
diff --git a/components/lib/datatable/style/DataTableStyle.js b/components/lib/datatable/style/DataTableStyle.js
index 1b46d9c7250..e249af1ca45 100644
--- a/components/lib/datatable/style/DataTableStyle.js
+++ b/components/lib/datatable/style/DataTableStyle.js
@@ -98,7 +98,7 @@ const css = `
 
     .p-datatable .p-column-resizer {
         display: block;
-        position: absolute !important;
+        position: absolute;
         top: 0;
         right: 0;
         margin: 0;
@@ -230,7 +230,7 @@ const css = `
     }
 
     .p-datatable .p-virtualscroller .p-virtualscroller-loading {
-        transform: none !important;
+        transform: none;
         min-height: 0;
         position: sticky;
         top: 0;
diff --git a/components/lib/dialog/Dialog.d.ts b/components/lib/dialog/Dialog.d.ts
index c0f493b30dc..4cff6945384 100755
--- a/components/lib/dialog/Dialog.d.ts
+++ b/components/lib/dialog/Dialog.d.ts
@@ -136,7 +136,7 @@ export interface DialogBreakpoints {
      *
      * @media screen and (max-width: ${breakpoint[key]}) {
      *      .p-dialog[attributeSelector] {
-     *          width: ${breakpoint[value]} !important;
+     *          width: ${breakpoint[value]};
      *      }
      * }
      */
diff --git a/components/lib/dialog/Dialog.vue b/components/lib/dialog/Dialog.vue
index 6646e305f82..fd33ef2d94e 100755
--- a/components/lib/dialog/Dialog.vue
+++ b/components/lib/dialog/Dialog.vue
@@ -267,7 +267,7 @@ export default {
                     innerHTML += `
                         @media screen and (max-width: ${breakpoint}) {
                             .p-dialog[${this.attributeSelector}] {
-                                width: ${this.breakpoints[breakpoint]} !important;
+                                width: ${this.breakpoints[breakpoint]};
                             }
                         }
                     `;
diff --git a/components/lib/dialog/style/DialogStyle.js b/components/lib/dialog/style/DialogStyle.js
index b3851bf6b69..3e97312c63a 100644
--- a/components/lib/dialog/style/DialogStyle.js
+++ b/components/lib/dialog/style/DialogStyle.js
@@ -118,10 +118,10 @@ const css = `
         -webkit-transition: none;
         transition: none;
         transform: none;
-        width: 100vw !important;
-        height: 100vh !important;
-        top: 0px !important;
-        left: 0px !important;
+        width: 100vw;
+        height: 100vh;
+        top: 0px;
+        left: 0px;
         max-height: 100%;
         height: 100%;
     }
diff --git a/components/lib/message/style/MessageStyle.js b/components/lib/message/style/MessageStyle.js
index fe12e3efc8f..6c24f7ac1bb 100644
--- a/components/lib/message/style/MessageStyle.js
+++ b/components/lib/message/style/MessageStyle.js
@@ -39,7 +39,7 @@ const css = `
     .p-message.p-message-leave-to {
         max-height: 0;
         opacity: 0;
-        margin: 0 !important;
+        margin: 0;
     }
 
     .p-message-leave-active {
diff --git a/components/lib/overlaypanel/OverlayPanel.d.ts b/components/lib/overlaypanel/OverlayPanel.d.ts
index 2ef38e60e5b..8ba4b085dfe 100755
--- a/components/lib/overlaypanel/OverlayPanel.d.ts
+++ b/components/lib/overlaypanel/OverlayPanel.d.ts
@@ -103,7 +103,7 @@ export interface OverlayPanelBreakpoints {
      *
      * @media screen and (max-width: ${breakpoint[key]}) {
      *      .p-overlaypanel[attributeSelector] {
-     *          width: ${breakpoint[value]} !important;
+     *          width: ${breakpoint[value]};
      *      }
      * }
      */
diff --git a/components/lib/overlaypanel/OverlayPanel.vue b/components/lib/overlaypanel/OverlayPanel.vue
index e268fab2fb1..9289a59debc 100755
--- a/components/lib/overlaypanel/OverlayPanel.vue
+++ b/components/lib/overlaypanel/OverlayPanel.vue
@@ -281,7 +281,7 @@ export default {
                     innerHTML += `
                         @media screen and (max-width: ${breakpoint}) {
                             .p-overlaypanel[${this.attributeSelector}] {
-                                width: ${this.breakpoints[breakpoint]} !important;
+                                width: ${this.breakpoints[breakpoint]};
                             }
                         }
                     `;
diff --git a/components/lib/paginator/Paginator.vue b/components/lib/paginator/Paginator.vue
index 43e4789eb19..75a88e344e6 100755
--- a/components/lib/paginator/Paginator.vue
+++ b/components/lib/paginator/Paginator.vue
@@ -167,22 +167,22 @@ export default {
                             @media screen ${minValue} {
                                 .paginator[${this.attributeSelector}],
                                 .p-paginator-default{
-                                    display: flex !important;
+                                    display: flex;
                                 }
                             }
                         `;
                     } else {
                         innerHTML += `
                         .paginator[${this.attributeSelector}], .p-paginator-${key} {
-                                display: none !important;
+                                display: none;
                             }
                         @media screen ${minValue} and (max-width: ${key}) {
                             .paginator[${this.attributeSelector}], .p-paginator-${key} {
-                                display: flex !important;
+                                display: flex;
                             }
                             .paginator[${this.attributeSelector}],
                             .p-paginator-default{
-                                display: none !important;
+                                display: none;
                             }
                         }
                     `;
diff --git a/components/lib/picklist/style/PickListStyle.js b/components/lib/picklist/style/PickListStyle.js
index b98def2a17d..4f05451414f 100644
--- a/components/lib/picklist/style/PickListStyle.js
+++ b/components/lib/picklist/style/PickListStyle.js
@@ -33,7 +33,7 @@ const css = `
 
     .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to,
     .p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to {
-        transition: none !important;
+        transition: none;
     }
 }
 `;
diff --git a/components/lib/ripple/style/RippleStyle.js b/components/lib/ripple/style/RippleStyle.js
index a419a3ba4d4..dcd29aec326 100644
--- a/components/lib/ripple/style/RippleStyle.js
+++ b/components/lib/ripple/style/RippleStyle.js
@@ -28,7 +28,7 @@ const css = `
     }
 
     .p-ripple-disabled .p-ink {
-        display: none !important;
+        display: none;
     }
 }
 `;
diff --git a/components/lib/sidebar/style/SidebarStyle.js b/components/lib/sidebar/style/SidebarStyle.js
index 79a6e3d3b79..7a152cdf081 100644
--- a/components/lib/sidebar/style/SidebarStyle.js
+++ b/components/lib/sidebar/style/SidebarStyle.js
@@ -49,11 +49,11 @@ const css = `
     .p-sidebar-full .p-sidebar {
         transition: none;
         transform: none;
-        width: 100vw !important;
-        height: 100vh !important;
+        width: 100vw;
+        height: 100vh;
         max-height: 100%;
-        top: 0px !important;
-        left: 0px !important;
+        top: 0px;
+        left: 0px;
     }
 
     /* Animation */
diff --git a/components/lib/toast/Toast.vue b/components/lib/toast/Toast.vue
index 9a1087a4b5d..292ad6c5558 100755
--- a/components/lib/toast/Toast.vue
+++ b/components/lib/toast/Toast.vue
@@ -127,7 +127,7 @@ export default {
                     let breakpointStyle = '';
 
                     for (let styleProp in this.breakpoints[breakpoint]) {
-                        breakpointStyle += styleProp + ':' + this.breakpoints[breakpoint][styleProp] + '!important;';
+                        breakpointStyle += styleProp + ':' + this.breakpoints[breakpoint][styleProp] + ';';
                     }
 
                     innerHTML += `
diff --git a/components/lib/treetable/style/TreeTableStyle.js b/components/lib/treetable/style/TreeTableStyle.js
index f1697e4f32d..1822ed6f54f 100644
--- a/components/lib/treetable/style/TreeTableStyle.js
+++ b/components/lib/treetable/style/TreeTableStyle.js
@@ -71,7 +71,7 @@ const css = `
 
     .p-treetable .p-column-resizer {
         display: block;
-        position: absolute !important;
+        position: absolute;
         top: 0;
         right: 0;
         margin: 0;
diff --git a/doc/timeline/TemplateDoc.vue b/doc/timeline/TemplateDoc.vue
index 8b7cccb2f5b..cc2d501e8d0 100644
--- a/doc/timeline/TemplateDoc.vue
+++ b/doc/timeline/TemplateDoc.vue
@@ -120,10 +120,10 @@ export default {
 @media screen and (max-width: 960px) {
     ::v-deep(.customized-timeline) {
         .p-timeline-event:nth-child(even) {
-            flex-direction: row !important;
+            flex-direction: row;
 
             .p-timeline-event-content {
-                text-align: left !important;
+                text-align: left;
             }
         }
 
@@ -181,10 +181,10 @@ const events = ref([
 @media screen and (max-width: 960px) {
     ::v-deep(.customized-timeline) {
         .p-timeline-event:nth-child(even) {
-            flex-direction: row !important;
+            flex-direction: row;
 
             .p-timeline-event-content {
-                text-align: left !important;
+                text-align: left;
             }
         }