Styled Components Table

Table.jsx

import React from "react";
import styled from "styled-components";

import font from "styled/font";

export const Table = styled.table`
  border-collapse: collapse;
  background: ${({ theme }) => theme.table.head.background};
`;

export const TableHead = styled.thead`
  color: ${({ theme }) => theme.table.head.backgroundContrast};
  text-transform: uppercase;
`;

export const TableRow = styled.tr``;

export const TableBody = styled.tbody`
  ${TableRow} {
    border-bottom: 1px solid ${({ theme }) => theme.table.separator};
    background: ${({ theme }) => theme.table.background};
  }

  ${TableRow}:nth-child(2n+2) {
    background: ${({ theme }) => theme.table.backgroundOdd};
  }
`;

export const TableData = styled.td`
  ${font}
  padding: 1rem;
`;

theme.json

{
  "table": {
    "head": {
      "background": "#F0F0F0",
      "backgroundContrast": "#666"
    },

    "background": "#FFF",
    "backgroundOdd": "#FAFAFA",
    "separator": "#D4D4D4"
  },
}