I am fucking tired of copying rowCell/headCell styles

components/table/Table.js

@@ -92,7 +92,7 @@ const factory = (TableHead, TableRow) => {
       } = this.props;
       return (
         <table {...rest} className={classnames(theme.table, className)}>
-          <thead className={theme.head}>{this.renderHead()}</thead>
+          <thead>{this.renderHead()}</thead>
           <tbody>{this.renderRows()}</tbody>
         </table>
       );

components/table/TableCell.js

@@ -56,8 +56,6 @@ const factory = (FontIcon) => {
       } = this.props;
 
       const _className = classnames(theme.tableCell, {
-        [theme.headCell]: tagName === 'th',
-        [theme.rowCell]: tagName === 'td',
         [theme.sorted]: sorted,
         [theme.numeric]: numeric,
       }, className);

components/table/TableRow.js

@@ -29,7 +29,7 @@ const factory = (Checkbox, TableCell) => {
 
     render() {
       const { children, className, selectable, idx, selected, theme, ...other } = this.props; // eslint-disable-line
-      const _className = classnames(theme.row, {
+      const _className = classnames({
         [theme.selected]: selectable && selected,
       }, className);
       return (

components/table/theme.css

@@ -28,12 +28,12 @@
   @apply --reset;
 }
 
-.head {
+.table > head, .head {
   padding-bottom: calc(0.3 * var(--unit));
   white-space: nowrap;
 }
 
-.row {
+.table > tbody > tr, .row {
   color: var(--table-row-color);
   height: var(--table-row-height);
   transition-duration: 0.28s;
@@ -45,6 +45,10 @@
   &.selected { background-color: var(--table-selection-color); }
 }
 
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
 .rowCell,
 .headCell {
   padding: 0 var(--table-column-padding) 12px var(--table-column-padding);
@@ -55,6 +59,8 @@
   &.numeric { text-align: right; }
 }
 
+.table > thead > tr > td,
+.table > tbody > tr > td,
 .rowCell {
   border-bottom: var(--table-dividers);
   border-top: var(--table-dividers);
@@ -72,6 +78,8 @@
   }
 }
 
+.table > thead > tr > th,
+.table > tbody > tr > th,
 .headCell {
   color: var(--table-header-color);
   font-size: var(--table-header-font-size);