React Styled Components Tutorial

Learn how to use styled components in React. This allows you to easily style your components with CSS.

----
Video Suggestions:

----
Follow Me Online Here:

----
#benawad
​
----
#benawad

[ablanchi]

The most difficult thing about Styled Components is figuring out how you want to structure it in your application.
Should you pool everything in one place and use it where ever you need it, or keep things close to where they're used with a separate shared components folder, or maybe use some atomic structuring, should you break everything down in to a styled component or mix in normal JSX.

Being spoiled for choice isnt always a good thing, haha.

[TheNerdTyler]

This deserves to be the #1 video. Actually shows code. Thank you for posting

[mrwho]

text-align: top? omg...who's teaching me about css in js?!?!

[karamcsand]

Thanks, I love simple tutorials like this.

[rahulsethione]

I was watching this video in peace but then the algoexpert chick was on my face. Stopping this video now and going back to inverting a binary tree...

[ahmedmusawir]

Plz, give us more on this ... esp the ThemeProvider usage and how to customize ReactStrap components ... thanx in advance!

[LukePighetti]

I thought the point of styled components was to bring CSS back into the javascript file. This just seems like doing CSS modules but you get named tags.

[yonglee]

I loved how easy it was to style components / elements with styled-components for websites, but it was slower than CSS. I had to convert all the styled-components to CSS to make them faster. The performance was very noticeable between the two.

[stevereid]

I never really understood how to use Styled Components, until now!! Excellent video. Gonna try it first thing tomorrow. Thanks

[dawid_dahl]

Great little presentation, thank you!

I will now use "bob" for all my variable names.

[aditgaur]

Who is here in 2020 with react 2.0 with built in styled components

[Chavezd]

very good overview and demonstration thank you for this, exactly what I was looking for!

[tatamobile]

thanks for posting this. very helpful.

[evgenyyakimov]

Thanks for a quick and insightful summary

[DK-oxze]

Nice video. Would be great to see a similar introduction on styled-systems too!

[garrettbaker]

I'm trying to add a backgroundImage to my home page using the 'style={{}}' technique with no luck. I have been able to load regular images using 'require', but the backgroundImage remains elusive. Can you point me to the solution? Thanks!

[damoose]

Excellent content!! Could you plz do a mini-series on styled-component? Plz. plz plz!!!

[Nlanaconda]

This video is 2 years old. Is it still good enough to use for learning this? Or have things changed or improved?

[thealpha_]

Hey! Isn't it slower? The browser has to parse the JS and then the CSS.

[ahmedmusawir]

Also, a bit higher audio volume would be great!