From 1c1db006268a9fffa61333f44d23b2a389f1a57b Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 20 Jul 2022 16:08:57 -0700
Subject: [PATCH] Example of how to style table components

---
 packages/web/components/elements/Table.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/web/components/elements/Table.tsx b/packages/web/components/elements/Table.tsx
index 639498755..c44bab7af 100644
--- a/packages/web/components/elements/Table.tsx
+++ b/packages/web/components/elements/Table.tsx
@@ -30,6 +30,10 @@ const newThead = {
   background: '#156'
 }
 
+const StyledTable = styled(ResponsiveTable, {
+  // Add css here
+})
+
 export function Table(props: TableProps): JSX.Element {
   const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
 
@@ -102,7 +106,7 @@ export function Table(props: TableProps): JSX.Element {
           },
         }}
       >
-        <ResponsiveTable>
+        <StyledTable>
           <Thead className={newThead}>
               <Tr>
                 {props.headers.map((header: string, index: number) => (
@@ -182,7 +186,7 @@ export function Table(props: TableProps): JSX.Element {
               </Tr>
             ))}
           </Tbody>
-        </ResponsiveTable>
+        </StyledTable>
       </Box>
     </VStack>
   )