fix: Fix table styling for striped variation (#4889)

aws-amplify · Jan 6, 2024 · 067e2b1 · 067e2b1
1 parent 936243f
commit 067e2b1
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/.changeset/loud-dolphins-listen.md b/.changeset/loud-dolphins-listen.md
@@ -0,0 +1,5 @@
+---
+'@aws-amplify/ui': patch
+---
+
+Fix table styling for striped variation
diff --git a/packages/ui/src/theme/css/component/table.scss b/packages/ui/src/theme/css/component/table.scss
@@ -81,6 +81,14 @@
       var(--amplify-components-table-header-border-width);
   }
 
+  &--striped {
+    .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
+      background-color: var(
+        --amplify-components-table-row-striped-background-color
+      );
+    }
+  }
+
   &__caption {
     caption-side: var(--amplify-components-table-caption-caption-side);
     color: var(--amplify-components-table-caption-color);
@@ -149,14 +157,6 @@
   /**
    * Data attribute stylings
    */
-  &[data-variation='striped'] {
-    .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
-      background-color: var(
-        --amplify-components-table-row-striped-background-color
-      );
-    }
-  }
-
   &[data-highlightonhover='true'] {
     .amplify-table__row:not(.amplify-table__head *):hover {
       background-color: var(