search

jsaelhof / movie-picker

Next.js test app. Keeps a list of movies to watch across various streaming services and randomly picks one.
https://moviedecider4000.vercel.app
2 stars 0 forks source link

Add styled components #7

Closed jsaelhof closed 2 years ago

jsaelhof commented 3 years ago

CSS modules are ok but styled components are probably better and would let me get better at working with them

jsaelhof commented 2 years ago

This could be trickier than I initially anticipated because of how many material ui components i'm using. I found an article on how to do it but it looked a bit forced. It might be better to just use MUI's useStyles/JSS.

jsaelhof commented 2 years ago

I updated to React17/Next11/Mui5 which introduces styled components and the sx prop as styling methods. I struggled with getting styled components to work (not the mui default) so I ended up using the default Emotion styled components engine. The syntax is interchangeable and there is less headache. I ended up going and back and forth between styled components and a clsx/css modules approach but landed on a combination of styled components and some clsx-ish use of the sx component.