How to structure React Projects using styled components?

Comments

[dastasoft]

I use styled components mainly on the library of components I'm making and my personal approach is:

- MyComponent
|- index.js
|- MyComponentBase.js
|- MyComponent.js

• index.js only imports and exports MyComponent.js.
• MyComponent.js imports MyComponentBase.js and creates a styled version, this file handles all de "CSS" and props related to the CSS.
• MyComponentBase.js it's a regular React component.

The downside of working like this is when you implement some ReactDocs the proptypes on the MyComponent are not visible by default.

I hope it helps.