CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
devamat
devamat

Reputation: 2503

ReactJS and Material UI makeStyles/useStyles question

I'm working on a small web application and I'm developing it using ReactJS and Material UI. In the examples provided in the documentation many components seems to have useStyles within the code. I followed the examples and now I basically a useStyles function within each of my components. My question is: is it good practice? Usually I have a separate CSS file with all the classes, and frankly I find it easier to manage, but for this case I wanted to follow the CSS-in-JS pattern.

You can see an example of the code I'm working on here: https://github.com/sickdyd/foriio/blob/master/src/components/body/UserProfile.js

Thank you for any clarification you may can give me.

Upvotes: 1

Views: 493

Answers (1)

Domino987
Domino987

Reputation: 8774

Yes, that is good practice.

It allows you to separate your concerns and localize your styles, where they are needed. You do not accidentally override styles while working on other classes. This will help you especially for larger projects.

It will also allow code splitting and only the CSS/CSS-in-JS that is needed and actually used will be downloaded and added to your website. This will improve your initial paint time as well since less CSS has to be parsed.

I you feel that you are repeating your code at several location, you could also share the useStyles functions or override the global theme to reduce the overall amount of code as well.

Upvotes: 2

Related Questions