styles.tsx

@withStyles(styles)
export class Row extends React.Component<
  WithStyles &
  React.HTMLAttributes<HTMLDivElement> & {
  align?: React.CSSProperties['justify-content'],
  valign?: React.CSSProperties['align-items'],
  flex?: React.CSSProperties['flex'],
  wrap?: React.CSSProperties['flexWrap']
}> {
  render () {
    const {classes, align, valign, flex, wrap, style, className, ...rest} = this.props;
    const updatedStyle = {flex, flexWrap: wrap, justifyContent: align, alignItems: valign, ...style};
    return (
      <div className={classNames(classes.flex, classes.row, className)} style={updatedStyle} {...rest}>
        {this.props.children}
      </div>
    );
  }
}

@withStyles(styles)
export class Column extends React.Component<
  WithStyles &
  React.HTMLAttributes<HTMLDivElement> & {
  align?: React.CSSProperties['align-items'],
  valign?: React.CSSProperties['justify-content'],
  flex?: React.CSSProperties['flex']
}> {
  render () {
    const {classes, align, valign, flex, style, className, ...rest} = this.props;
    const updatedStyle = {flex, justifyContent: valign, alignItems: align, ...style};
    return (
      <div className={classNames(classes.flex, className)} style={updatedStyle} {...rest}>
        {this.props.children}
      </div>
    );
  }
}