Let's Take a Look at CSS in JS with React in 2019 - CSS & Inline Styling
CSS in JS isn't unique to React, however, I'm a little Reac...
For further actions, you may consider blocking this person and/or reporting abuse
I'm interested to see the rest of the series 😉
I actually really like inline styles for some things... it's nice to not have to switch files and pollute the global space with styles just for one little thing... but it can also become a bad habit.
And I actually really didn't like most css-in-js that I ran across, but after being forced to use it for awhile, it wasn't so bad either; so I'm interested to hear your other posts!
Glad you're liking the series so far!
I initially bounced off the second I first saw and gradually got invested until it's all I do for styling in react in my personal projects.
There's still a few I've seen that I think messy up a component but I won't spoil my series entries here ;).
I'm pretty excited to go over ones I know, revisit ones I bounced off, and find new ones!
I'm listening. *clicks follow* :D
By the way, personally what I'm doing now is that I have scss files that I import around, and I only use inline styles where I want to do parameter expansion from JS into the styles. Like when there is a color picker for a field in the CMS. Or when I want to do some responsive dynamics.
Super appreciate the follow :D. Now I have obligations to continue the series!
I've used SCSS with react too though I was soured because those stylesheets were poorly written. I enjoyed the nesting rules though!
Glad to hear it's working for you though!
You can put your style object outside the render function. Or as static property of the function/class. otherwise you are gonna to recreate the same style each time
Thanks for commenting, You're totally right Pasquale! Ideally you can store your style variables really anywhere you want to and import them into your components.
However I did want to just show off a simple example that can also show props affecting styles.
We can also use
useMemoto avoid recreating the same style on every render but I figured it was just a little out of scope for what I wanted to show :)