Where to put styled components styles-CodePudding

components for styling my react app, so far i had a separate folder in each page's folder called Styles and stored my styled component wrappers inside it( e.g. ThemeToggler.Style.js or Section.Style.js and ... ).

But i realized that my code is getting messy and project files count increases so fast because creating a component means creating 2 files, also some styles was so simple and small that i decided to write them inside the component's main file, because its more readable.

But i still feel that this approach is not good too because some styles are too long to put them inside the component's file , also some styles are not about the component it self, maybe i have a style for showing the adjacent nav of this div if user clicks on it. I thought that i'll put them inside a separate file called DivOnHover.js but it seems not correct :)

I'll like to hear your approach for managing styled-components styles, how do you store them in your folder structure ?

CodePudding user response：

Personally I tend to use this structure pretty often:

components/
| Button/
| | Button.js
| | Button.styles.js
| Navbar/
| | Navbar.js
| | Navbar.styles.js

At the cost of making more files, it allows you to separate your component logic and styles.

CodePudding user response：

My Folder Structure would be like this

/app
  /pages ( React Router )
  /styles ( CSS only )
  /components ( Reusable Components )
  /styled ( Styled Components )
  /hooks ( React Hooks )
  index.js
  app.js
  routes.js ( React Router )