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 ?
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.
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 )