question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

"StyledComponent" Component - No propTypes defined!

See original GitHub issue

After upgrading from Storybook 4.x.x to 5.0.6., I am not able anymore to see the assigned propTypes for Styled Components in Storybook anymore.

That’s what I see in Storybook:


Screen Shot 2019-04-04 at 11 56 05


That’s what I have coded:

const TabBar = styled.div`
  display: flex;
  flex-direction: column;
`;

TabBar.displayName = 'TabBar';

TabBar.propTypes = {
  children: PropTypes.arrayOf(
    PropTypes.shape({
      type: PropTypes.oneOf([TabBar.ContentTab]),
    }),
  ).isRequired,
};

And I would expect to see the children prop types instead.

Note: It works for other components which haven’t defined with styled components though.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:2
  • Comments:16 (9 by maintainers)

github_iconTop GitHub Comments

2reactions
shilmancommented, Apr 10, 2019

@oknoorap Nope, will comment here when it is. If anybody else wants to take a crack at it, they’re more than welcome!

2reactions
liamrosscommented, Apr 4, 2019

@shilman This may also be related to the bug I logged for the missing prop table in TypeScript: https://github.com/storybooks/storybook/issues/6345

Read more comments on GitHub >

github_iconTop Results From Across the Web

"StyledComponent" Component - No propTypes defined! #6417
After upgrading from Storybook 4.x.x to 5.0.6., I am not able anymore to see the assigned propTypes for Styled Components in Storybook anymore....
Read more >
How to declare "propTypes" for styled-component?
MyLib.tsx. import PropTypes from 'prop-types' import styled from 'styled-components' const Scroller: any = styled. div<ScrollerProp>` overflow- ...
Read more >
API Reference - styled-components
A function that receives the props that are passed into the component and computes a value, that is then going to be merged...
Read more >
styled-components - npm
styled -components is compatible with both React (for web) and React Native – meaning it's the perfect choice even for truly universal apps!...
Read more >
Component prop types are not inferred when using styled ...
Expect to see someProp, instead no props are shown. ... We don't have any completions even if we do not use generic parameters....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found