Fix #5096 - Component Styles: Remove use of !important now that @layer …

…is used (#5097)

* Remove !important from component CSS

* Add back important on Dialog maximize

* Update SidebarBase.js

---------

Co-authored-by: Melloware <mellowaredev@gmail.com>

components/lib/cascadeselect/CascadeSelect.js

@@ -233,7 +233,7 @@ export const CascadeSelect = React.memo(
     }
 
     .p-cascadeselect-panel[${selector}] .p-cascadeselect-item-active > .p-cascadeselect-sublist {
-        left: 0 !important;
+        left: 0;
         box-shadow: none;
         border-radius: 0;
         padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */

components/lib/cascadeselect/CascadeSelectBase.js

@@ -121,7 +121,7 @@ const styles = `
     }
     
     .p-cascadeselect-item-active {
-        overflow: visible !important;
+        overflow: visible;
     }
     
     .p-cascadeselect-item-active > .p-cascadeselect-sublist {

components/lib/componentbase/ComponentBase.js

@@ -316,7 +316,7 @@ const commonStyle = `
     }
 
     .p-disabled, .p-disabled * {
-        cursor: default !important;
+        cursor: default;
         pointer-events: none;
         user-select: none;
     }
@@ -442,7 +442,7 @@ const commonStyle = `
         padding: 0;
         position: absolute;
         width: 1px;
-        word-wrap: normal !important;
+        word-wrap: normal;
     }
 
     /* @todo Refactor */

components/lib/contextmenu/ContextMenu.js

@@ -78,7 +78,7 @@ export const ContextMenu = React.memo(
     }
 
     .p-contextmenu[${selector}] .p-menuitem-active > .p-submenu-list {
-        left: 0 !important;
+        left: 0;
         box-shadow: none;
         border-radius: 0;
         padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */

components/lib/datatable/DataTable.js

@@ -387,7 +387,7 @@ export const DataTable = React.forwardRef((inProps, ref) => {
         let selector = `.p-datatable[${attributeSelector.current}] > .p-datatable-wrapper ${isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller'} > .p-datatable-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} > .p-datatable-thead > tr > th:nth-child(${index + 1}),
@@ -599,7 +599,7 @@ export const DataTable = React.forwardRef((inProps, ref) => {
 
         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} > .p-datatable-thead > tr > th:nth-child(${index + 1}),
@@ -805,12 +805,12 @@ export const DataTable = React.forwardRef((inProps, ref) => {
 @media screen and (max-width: ${props.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;
     }

components/lib/datatable/DataTableBase.js

@@ -116,7 +116,7 @@ const styles = `
 
     .p-datatable .p-column-resizer {
         display: block;
-        position: absolute !important;
+        position: absolute;
         top: 0;
         right: 0;
         margin: 0;
@@ -254,7 +254,7 @@ const styles = `
     }
 
     .p-datatable .p-virtualscroller .p-virtualscroller-loading {
-        transform: none !important;
+        transform: none;
         min-height: 0;
         position: sticky;
         top: 0;

components/lib/dialog/Dialog.js

@@ -397,7 +397,7 @@ export const Dialog = React.forwardRef((inProps, ref) => {
             innerHTML += `
                 @media screen and (max-width: ${breakpoint}) {
                     .p-dialog[${attributeSelector.current}] {
-                        width: ${props.breakpoints[breakpoint]} !important;
+                        width: ${props.breakpoints[breakpoint]};
                     }
                 }
             `;

components/lib/dialog/DialogBase.js

@@ -192,12 +192,12 @@ const styles = `
     .p-dialog-maximized {
         transition: none;
         transform: none;
-        margin: 0 !important;
+        margin: 0;
         width: 100vw !important;
         height: 100vh !important;
         max-height: 100%;
-        top: 0px !important;
-        left: 0px !important;
+        top: 0px;
+        left: 0px;
     }
     
     .p-dialog-maximized .p-dialog-content {

components/lib/megamenu/MegaMenu.js

@@ -452,7 +452,7 @@ export const MegaMenu = React.memo(
 @media screen and (max-width: ${props.breakpoint}) {
     .p-megamenu[${selector}] > .p-megamenu-root-list .p-menuitem-active .p-megamenu-panel {
         position: relative;
-        left: 0 !important;
+        left: 0;
         box-shadow: none;
         border-radius: 0;
         background: inherit;

components/lib/overlaypanel/OverlayPanel.js

@@ -181,7 +181,7 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => {
                 innerHTML += `
                     @media screen and (max-width: ${breakpoint}) {
                         .p-overlaypanel[${attributeSelector.current}] {
-                            width: ${props.breakpoints[breakpoint]} !important;
+                            width: ${props.breakpoints[breakpoint]};
                         }
                     }
                 `;

components/lib/ripple/RippleBase.js

@@ -21,7 +21,7 @@ const styles = `
     }
     
     .p-ripple-disabled .p-ink {
-        display: none !important;
+        display: none;
     }
 }
 

components/lib/scrolltop/ScrollTopBase.js

@@ -30,7 +30,7 @@ const styles = `
     }
     
     .p-scrolltop-helper {
-        display: none !important;
+        display: none;
     }
     
     .p-scrolltop-enter {

components/lib/tieredmenu/TieredMenu.js

@@ -94,7 +94,7 @@ export const TieredMenu = React.memo(
     }
 
     .p-tieredmenu[${selector}] .p-menuitem-active > .p-submenu-list {
-        left: 0 !important;
+        left: 0;
         box-shadow: none;
         border-radius: 0;
         padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */

components/lib/treetable/TreeTableBase.js

@@ -69,7 +69,7 @@ const styles = `
     
     .p-treetable .p-column-resizer {
         display: block;
-        position: absolute !important;
+        position: absolute;
         top: 0;
         right: 0;
         margin: 0;