Filter none DOM elements from properties (dynamic props for jss customization)

JSS allows for passing custom props to components to create style customization: http://cssinjs.org/react-jss/?v=v8.6.0#dynamic-values

Material-ui allows for this also: https://material-ui.com/customization/overrides/#2-dynamic-variation-for-a-one-time-situation

However, material-ui passes the custom property straight to the DOM with some components (I only tried with TableCell, leading to a warning

Warning: React does not recognize thepaddingHorizontalprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercasepaddinghorizontalinstead. If you accidentally passed it from a parent component, remove it from the DOM element.

This suggests that this happens everywhere and that property destructuring isn't happening correctly to protect against this.

[x] This is a v1.x issue (v0.x is no longer maintained).
[x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

No warning

Current Behavior

Steps to Reproduce (for bugs)

<TableCell
    key={`${col.key}-${n.id}`}
    numeric={col.type === 'number'}
    paddingHorizontal={col.paddingHorizontal}
    className={classes.myColumn}
    >
    <Link to={`${detailUrl}/${n.id}`}>{render}</Link>
</TableCell>
[...]

const styles = theme => ({
  myColumn: {
    paddingLeft: props => props.paddingHorizontal && props.paddingHorizontal,
    paddingRight: props => props.paddingHorizontal && props.paddingHorizontal
  }
});
export default withStyles(styles)(MyTable);

The workaround could be to work with partial classes that you dynamically activate using classnames, I consider this a significantly less flexible approach.

<TableCell
    key={`${col.key}-${n.id}`}
    numeric={col.type === 'number'}
    paddingHorizontal={col.paddingHorizontal}
    className={classnames({
          [`classes.padding${col.paddingHorizontal10}`]: col.isPaddingHorizontal
       })}
    >
    <Link to={`${detailUrl}/${n.id}`}>{render}</Link>
</TableCell>
[...]

const styles = theme => ({
  padding10: {
    paddingLeft: '10px',
    paddingRight: '10px'
  }
});
export default withStyles(styles)(MyTable);

Your Environment

Tech	Version
Material-UI	v1.2.0
React	16.4

mui / material-ui