DEV Community

K.A.C Madushan
K.A.C Madushan

Posted on

How to structure React Projects using styled components?

Top comments (1)

Collapse
 
dastasoft profile image
dastasoft • Edited

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.