Need suggestion about React+Material UI component directory structure

Hello Guys,

I need a quick suggestion regarding the React component directory structure. I am using Material UI in my React app and using CSS in JS feature to style my components (using makeStyles).

At the moment my JS and CSS code resides in a single JS file. Like this

As I keep adding more CSS classes my JS code keeps moving down (duh...). And it is pretty annoying to keep scrolling up and down to check things or to add new code.

The question is, will it be considered good practice to move CSS classes into a separate file like traditional CSS? If there is any other way to do it please let me know.

Thanks!

Comments

[OlehTrukhan]

Move it to seperate file like Complnent.styles.js