<!--- PROPS --> not caught with styled-components HOC

[semoal]

Hi!!

I'm using on some components withTheme() HOC from styled-components, actually this addon can't get the props table working with it.

export default withTheme(TextField);

export default TextField;

Thanks!

[tuchk4]

exported component should be with defined propTypes.

withTheme should copy propTypes automatically..
In other cases use hoist-non-react-statics

This should work:

import React from 'react';
import PropTypes from 'prop-types';
import styled, { withTheme } from 'styled-components';

const Button = styled.button`
`;

Button.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func,
  variant: PropTypes.oneOf(['success', 'warning', 'alert']),
};

export default withTheme(Button);

This also will work:

import React from 'react';
import PropTypes from 'prop-types';
import styled, { withTheme } from 'styled-components';

const Button = styled.button`
`;


const ButtonWithTheme =  withTheme(Button);

ButtonWithTheme.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func,
  variant: PropTypes.oneOf(['success', 'warning', 'alert']),
};

export default ButtonWithTheme;

This will NOT work:

import React from 'react';
import PropTypes from 'prop-types';
import styled, { withTheme } from 'styled-components';

const Button = styled.button`
`;

Button.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func,
  variant: PropTypes.oneOf(['success', 'warning', 'alert']),
};

export default props => <Button {...props} />;

[semoal]

Actually I’m doing the first one and it doesn’t work mate.

[tuchk4]

I made some local tests and everything is ok with "styled-components": "^4.1.3"

What version of styled-components?

[semoal]

I’m out home but I guess it’s yours version. Latest stable.

The only difference I remember(later I’ll check it better), is I’m using default props too but damn it the code is almost the same. (All speaking from memory)

[tuchk4]

released example https://tuchk4.github.io/storybook-readme/?path=/story/propstable--button with withTheme
Here is sources https://github.com/tuchk4/storybook-readme/blob/master/packages/example-react/components/Button/index.js

Please try [email protected] and if faced again would be perfect to push repo with reproduction the issue.

[semoal]

Valerii here you have a branch example:
https://github.com/semoal/storybook-readme/tree/bug-hoc-sc
https://github.com/semoal/storybook-readme/blob/bug-hoc-sc/packages/example-react/components/Button/index.js

[semoal]

Valerii have you tried my proposal?

[tuchk4]

Sorry for long reply. See error now.

I would like to link this issue with #137 because of errors around the same problem.