fix(pivot-table): use a scoped base selector and global sub selectors

dhis2 · Jun 19, 2024 · dff1165 · dff1165
1 parent 7e89545
commit dff1165
Showing 1 changed file with 15 additions and 13 deletions.
diff --git a/src/components/PivotTable/styles/PivotTable.style.js b/src/components/PivotTable/styles/PivotTable.style.js
@@ -10,14 +10,14 @@ import {
     FONT_SIZE_LARGE,
 } from '../../../modules/pivotTable/pivotTableConstants.js'
 
-export const table = css.global`
+export const table = css`
     div.pivot-table-container {
         font-family: 'Roboto', Arial, sans-serif;
         overflow: auto;
         color: ${colors.grey900};
     }
 
-    table {
+    div.pivot-table-container :global(table) {
         border-spacing: 0;
         white-space: nowrap;
         box-sizing: border-box;
@@ -26,35 +26,37 @@ export const table = css.global`
         border-width: 1px 1px 0 0;
     }
 
-    table.fixed-headers {
+    div.pivot-table-container :global(table.fixed-headers) {
         border-width: 0 0 0 1px;
     }
 
-    table.fixed-headers tr th,
-    table.fixed-headers tr td {
+    div.pivot-table-container :global(table.fixed-headers tr th),
+    div.pivot-table-container :global(table.fixed-headers tr td) {
         border-width: 0 1px 1px 0;
     }
 
-    table.fixed-column-headers {
+    div.pivot-table-container :global(table.fixed-column-headers) {
         border-width: 0 1px 0 0;
     }
 
-    table.fixed-column-headers tr th,
-    table.fixed-column-headers tr td {
+    div.pivot-table-container :global(table.fixed-column-headers tr th),
+    div.pivot-table-container :global(table.fixed-column-headers tr td) {
         border-width: 0 0 1px 1px;
     }
 
-    table.fixed-headers thead tr:first-of-type th,
-    table.fixed-column-headers thead tr:first-of-type th {
+    div.pivot-table-container
+        :global(table.fixed-headers thead tr:first-of-type th),
+    div.pivot-table-container
+        :global(table.fixed-column-headers thead tr:first-of-type th) {
         border-top: 1px solid ${BORDER_COLOR};
     }
 
-    table.fixed-row-headers {
+    div.pivot-table-container :global(table.fixed-row-headers) {
         border-width: 0 0 1px 1px;
     }
 
-    table.fixed-row-headers tr th,
-    table.fixed-row-headers tr td {
+    div.pivot-table-container :global(table.fixed-row-headers tr th),
+    div.pivot-table-container :global(table.fixed-row-headers tr td) {
         border-width: 1px 1px 0 0;
     }
 `