Fix table styles, pass `style` to top-level element in inputs

components/autocomplete/Autocomplete.js

@@ -383,7 +383,7 @@ const factory = (Chip, Input) => {
     render() {
       const {
         placeholder, allowClear, className, clearTooltip, disabled,
-        error, label, value, selectedPosition, theme, multiple
+        error, label, value, selectedPosition, style, theme, multiple
       } = this.props;
       const inputProps = this.props.inputProps || {};
       const outerClassName = classnames(theme.autocomplete, {
@@ -393,7 +393,7 @@ const factory = (Chip, Input) => {
         ? value && Object.keys(value).length > 0
         : value != null);
       return (
-        <div data-react-toolbox="autocomplete" className={outerClassName}>
+        <div data-react-toolbox="autocomplete" className={outerClassName} style={style}>
           {selectedPosition === 'above' ? this.renderSelected() : null}
           {withClear ? <span
             className={'material-icons '+theme.clear}

components/checkbox/Checkbox.js

@@ -69,6 +69,7 @@ const factory = (Check) => {
           className={className}
           onMouseEnter={onMouseEnter}
           onMouseLeave={onMouseLeave}
+          style={style}
         >
           <input
             {...others}
@@ -85,7 +86,6 @@ const factory = (Check) => {
             checked={checked}
             disabled={disabled}
             rippleClassName={theme.ripple}
-            style={style}
             theme={theme}
           />
           {label ? <span data-react-toolbox="label" className={theme.text}>{label}</span> : null}

components/dialog/Dialog.js

@@ -20,6 +20,8 @@ const factory = (Overlay, Button) => {
       [props.theme.active]: props.active,
     }, props.className);
 
+    const style = props.style; // eslint-disable-line
+
     return (
       <Portal className={props.theme.wrapper}>
         <Overlay
@@ -33,7 +35,7 @@ const factory = (Overlay, Button) => {
           theme={props.theme}
           themeNamespace="overlay"
         />
-        <div data-react-toolbox="dialog" className={className}>
+        <div data-react-toolbox="dialog" className={className} style={style}>
           <section role="body" className={props.theme.body}>
             {props.title ? <h6 className={props.theme.title}>{props.title}</h6> : null}
             {props.children}

components/input/Input.js

@@ -163,7 +163,7 @@ const factory = (FontIcon) => {
     render() {
       const { children, defaultValue, disabled, error, floating, hint, icon,
               name, label: labelText, maxLength, multiline, required, role,
-              theme, type, value, onKeyPress, rows = 1, ...others } = this.props;
+              theme, type, value, onKeyPress, rows = 1, style, ...others } = this.props; // eslint-disable-line
       const length = maxLength && value ? value.length : 0;
       const labelClassName = classnames(theme.label, { [theme.fixed]: !floating });
 
@@ -198,7 +198,7 @@ const factory = (FontIcon) => {
       }
 
       return (
-        <div data-react-toolbox="input" className={className}>
+        <div data-react-toolbox="input" className={className} style={style}>
           {React.createElement(multiline ? 'textarea' : 'input', inputElementProps)}
           {icon ? <FontIcon className={theme.icon} value={icon} /> : null}
           <span className={theme.bar} />

components/switch/Switch.js

@@ -58,12 +58,13 @@ const factory = (Thumb) => {
         disabled,
         onChange, // eslint-disable-line no-unused-vars
         ripple,
+        style, // eslint-disable-line
         theme,
         ...others
       } = this.props;
       const _className = classnames(theme[disabled ? 'disabled' : 'field'], className);
       return (
-        <label data-react-toolbox="switch" className={_className}>
+        <label data-react-toolbox="switch" className={_className} style={style}>
           <input
             {...others}
             checked={this.props.checked}

components/table/theme.css

@@ -47,6 +47,7 @@
   &.selected { background-color: var(--table-selection-color); }
 }
 
+/* common styles for all kinds of cells */
 .table > thead > tr > th,
 .table > tbody > tr > th,
 .table > thead > tr > td,
@@ -61,9 +62,15 @@
   &:first-of-type { padding-left: 24px; }
   &:last-of-type { padding-right: 24px; }
   &.numeric { text-align: right; }
+
+  &.checkboxCell {
+    padding-right: 5px;
+    width: calc(1.8 * var(--unit));
+  }
 }
 
-.table > thead > tr > td,
+/* styles for both header and normal body cells */
+.table > tbody > tr > th,
 .table > tbody > tr > td,
 .rowCell {
   border-top: var(--table-dividers);
@@ -71,15 +78,13 @@
   vertical-align: middle;
 
   &.checkboxCell {
-    padding-right: 5px;
-    width: calc(1.8 * var(--unit));
-
     & > * {
       margin: 0;
     }
   }
 }
 
+/* styles for header cells both in body and header */
 .table > thead > tr > th,
 .table > tbody > tr > th,
 .headCell {
@@ -88,14 +93,17 @@
   font-weight: 500;
   height: var(--table-row-height);
   line-height: calc(2.4 * var(--unit));
-  padding-bottom: 8px;
   text-overflow: ellipsis;
+}
+
+/* styles for all cells in header */
+.table > thead > tr > th,
+.table > thead > tr > td,
+.headCell {
+  padding-bottom: 8px;
   vertical-align: bottom;
 
   &.checkboxCell {
-    padding-right: 5px;
-    width: calc(1.8 * var(--unit));
-
     & > * {
       margin: 0 0 3px;
     }

package.json

@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.io",
-  "version": "2.0.0-beta.21",
+  "version": "2.0.0-beta.22",
   "main": "./lib",
   "module": "./components",
   "author": {