Can't get it working with defaultProps

[vyorkin]

I've just tried to use defaultProps + stateless components and it seems this is the only way to make it work:

import React, { PropTypes } from 'react';
import styleable from 'react-styleable';
import cn from 'classnames';

import Icon from '../Icon';
import styles from './styles';

const { bool, string, object, node } = PropTypes;

export const Button = (props) => {
  // ......... skipped ...........
  return (
    <button className={rootClass} disabled={disabled} {...other}>
      {icon && <Icon className={cn(iconClassName, css.icon)} value={icon} />}
      {label && <span className={cn(labelClassName, css.label)}>{label}</span>}
      {children}
    </button>
  );
};

const StyledButton = styleable(styles)(Button);

StyledButton.defaultProps = {
  disabled: false,
  neutral: true,
  rounded: false,
  small: false,
  big: false
};
export default StyledButton;

if I do it as usual, e.g.:

Button.defaultProps = {
  disabled: false,
  neutral: true,
  rounded: false,
  small: false,
  big: false
};
export default styleable(styles)(Button);

then I won't have my defaults set.

[vyorkin]

btw I'm on babel 6, maybe its related somehow

[vyorkin]

I don't know how to fix this correctly, but it works if I change styledFn to be smth like this:

      return function styledFn(props) {
        return DecoratedComponent({
          ...DecoratedComponent.defaultProps,
          ...props,
          css: { ...stylesheet, ...props.css }
        });
      }

[jaketrent]

@vyorkin v2.2.3 on npm should have your fix included. Thanks for your help!

[vyorkin]

@jaketrent no problem, happy to help! thanks for quick response and for the awesome tool!