Change prop from style to styles for table components (#463)

Author: mpeyper

src/components/__snapshots__/table-header-item.test.js.snap

@@ -4,7 +4,7 @@ exports[`<TableHeaderItem /> should render correctly 1`] = `
 <TableHeaderItem>
   <Styled(td)
     className={undefined}
-    style={
+    styles={
       Array [
         Object {
           "color": "#e01",
@@ -16,17 +16,7 @@ exports[`<TableHeaderItem /> should render correctly 1`] = `
     }
   >
     <td
-      className="css-0 e51bxha0"
-      style={
-        Array [
-          Object {
-            "color": "#e01",
-          },
-          Object {},
-          Object {},
-          undefined,
-        ]
-      }
+      className="css-4x5e e51bxha0"
     >
       Header Text
     </td>

src/components/__snapshots__/table-item.test.js.snap

@@ -4,7 +4,7 @@ exports[`<TableItem /> should render correctly 1`] = `
 <TableItem>
   <Styled(td)
     className={undefined}
-    style={
+    styles={
       Array [
         Object {
           "color": "#444",
@@ -16,17 +16,7 @@ exports[`<TableItem /> should render correctly 1`] = `
     }
   >
     <td
-      className="css-0 eaiy41g0"
-      style={
-        Array [
-          Object {
-            "color": "#444",
-          },
-          Object {},
-          Object {},
-          undefined,
-        ]
-      }
+      className="css-11os9ew eaiy41g0"
     >
       Table Item Content
     </td>

src/components/__snapshots__/table-row.test.js.snap

@@ -4,7 +4,7 @@ exports[`<TableRow /> should render correctly 1`] = `
 <TableRow>
   <Styled(tr)
     className={undefined}
-    style={
+    styles={
       Array [
         Object {
           "color": "#00f",
@@ -15,16 +15,7 @@ exports[`<TableRow /> should render correctly 1`] = `
     }
   >
     <tr
-      className="css-0 emir1a80"
-      style={
-        Array [
-          Object {
-            "color": "#00f",
-          },
-          Object {},
-          undefined,
-        ]
-      }
+      className="css-1jziecw emir1a80"
     >
       <td>
         Table Row Content

src/components/table-header-item.js

@@ -11,7 +11,7 @@ export default class TableHeaderItem extends Component {
     return (
       <StyledTableHeaderItem
         className={this.props.className}
-        style={[
+        styles={[
           this.context.styles.components.tableHeaderItem,
           getStyles.call(this),
           typefaceStyle,

src/components/table-item.js

@@ -11,7 +11,7 @@ export default class TableItem extends Component {
     return (
       <StyledTableItem
         className={this.props.className}
-        style={[
+        styles={[
           this.context.styles.components.tableItem,
           getStyles.call(this),
           typefaceStyle,

src/components/table-row.js

@@ -10,7 +10,7 @@ export default class TableRow extends Component {
     return (
       <StyledTableRow
         className={this.props.className}
-        style={[
+        styles={[
           this.context.styles.components.tableRow,
           getStyles.call(this),
           this.props.style