Styled Components Full Tutorial - Style Your Components in React

[@MadBlissOff]

This is the first guy I've seen in my life with an imac and a mechanical keyboard.

[@kalviyalkarpom4127]

No around the bush, No waste of time, Just Did Perfect Job

[@jaimemedina3351]

Nice job! FYI for anyone interested in what's going on under the hood, React is leveraging the Tagged Literals functionality of JavaScript.

[@chawker67]

This tutorial won that for me 🏆 I had issues with most of the stuff you showed and now everything is perfectly clear. What's more you got me motivated so that's another +

[@PedroTechnologies]

Great to hear!

[@bilalch898]

You deserve a million subs for sharing such a great knowledge ☺️

[@PedroTechnologies]

Thank you!

[@jubjubfriend64]

5:20 hahaha yes exactly what I was hoping for, just getting started with react and I was reluctant to use styled components due to it all being a string without auto-fill

[@nirmalkoirala9660]

Hey Pedro! I am starting to learn react as a complete beginner and your video is helping me more than Udemy’s React course. Just finished the portfolio website following yours and now everything seems to make sense. Keep on doing awesome job. Keep the videos coming. Thanks million

[@worldclasscode1847]

Go for it :)

[@mpilodlamini8407]

Excellent tutorial. I am ready to and already applying styled components to my project. thank you very much

[@lottexy]

Amazing, so easy to understand! Tested this on typescript with a bit of googling to figure out the interface and all works great! Thanks pedro!

[@yamilmsilva]

MAN !!!!! You made it look so easy and ABSOLUTELY UNDERSTANDABLE!!! Thank you so much. You are the best !!!

[@Sezar_SZ]

This was the best video explaining how styled components work. THANK YOU!

[@skyescrawford9774]

I'm so grateful because the first video that I see when first time I learn about styled components is yours video, thank you so much

[@PedroTechnologies]

Great to hear!

[@blueb06]

Thanks....man...this is what exactly I needed.....these days...you are like a savior in my react learning journey !

[@nicolasturek2413]

explained very well, i appreciate you going through the small nuances and giving us reference examples!

[@maxmaksum4673]

it is the easiest and the most clear explanation of style component..thank you bro🙏🙏🙏

[@PedroTechnologies]

Thank you very much! Glad you liked it!

[@apexroots]

@@PedroTechnologies agree, thank you very much

[@tech3425]

15:56 You dont actually need the '&' symbol over there to show nested components. This is a CSS preprocessor called Scss, and it will automatically detect that you have nested the label inside the button. '&' is for copying the parent class name once again, for selectors like :hover, and :active, which dont work without the parent class name.

[@williamhorn363]

thanks for sharing this!

[@윤재희-m6k]

If i need some skill's how to use, Pedro always uploaded already. Your best guide I ever met

[@craigbarber3046]

& is called ampersand 😉 Literature major transitioning into tech. Great job! Thanks for posting. I'm collaborating with a friend and he asked me to use styled components instead of inline styling and now I feel like I can get started.

[@brandaoerick]

I love the way you've approached this topic! Well done, bro!

[@jamesdaniel597]

Nice rundown of styled components

[@worldclasscode1847]

I agree :)

[@hellofriend3091]

This is what i was looking for thanks mate

[@PedroTechnologies]

Glad I could help

[@limitless9483]

you can use that vscode plugin that help you rename your jsx tags

[@royz_1]

Loved the video. But in case you didn't know, styled-components uses SCSS. that's how it's providing all these extra functionalities.

[@caffeinated-pixels]

Cheers dude, this is a great introduction to using styled-components. It's helped me a lot!

[@sanvedbhoyar]

at 20:20 the reason why you have to pass className as props might be because styled components generates random classNames for us when we style a component... So when you styled the Button component, you essentially styled element of html.. and styled component automatically generated a random className for when you created component... Which is why I think this might be the reason you have to de-structure className prop in Button component so we can apply the styles from random className generated by styled components. Hope this helps

[@leg875]

I had the same query while watching the video. Thanks. Today I learned something new that after watching a video spend few mins to read through the youtube comments ;)

[@MrAndykofi]

Nice, enjoyed your lectures please keep up with the good work.

[@sarahcalbez7104]

Seriously, thank you a lot for this video!

[@zafarhussain8273]

one of th best video on styeld comp. i realy appriciate your effort

[@PedroTechnologies]

Thanks a lot 😊

[@mikheilbeldishevski2776]

Thank you so much, you have answered so many questions I had. Thanks again.

[@tsdineshjai8565]

learnt a lot at first go with this tutorial. Kudos Man !

[@joaohelio2925]

How can I use the link with styled- Components?

[@worldclasscode1847]

You can keep the tag, and put a styled div around it. My link. Then in the styled code you use the ".mytag" class selector to address the class and inject the CSS :)

[@pjguitar15]

This makes code looks so clean

[@PedroTechnologies]

Yess! I absolutely love projects structured using styled components!

[@musicmoi]

So happy I found this channel. 💓

[@mahfuzulhasan3108]

Explained very well, I appreciate it, keep it up

[@Anopeng]

It's the best explanation for me, thank you very much!

[@andarlin5312]

Great video! Very informative!

[@worldclasscode1847]

It's very good. I love Styled Components

[@balazsbereczky595]

it's a good summary, thanks!

[@varaprasad4163]

hey Pedro! could you please make a video on testing components? thanks.

[@PedroTechnologies]

Absolutely, will put that in the list!

[@mayurghuge8846]

Thank you.

[@eliasimokhai]

You made it easy...thank you

[@PedroTechnologies]

You're welcome 😊

[@benyaminyakobi3652]

That's a pure gold knowledge!

[@jordanmolina2351]

really easy to understand and helpful thanks

[@PedroTechnologies]

Glad to hear that!

[@petarstrbad7191]

Awesome video, and most useful so far, thank you man! :D

[@PedroTechnologies]

Glad it helped!

[@worldclasscode1847]

Awesome! I also use this in every project :)

[@sonnix31]

Excellent.

[@ezbitz23]

Thanks! Very useful content. Clear & concise.

[@balanepalaiyathane9714]

Simple and very effective

[@TheMyth2.9]

Hey great tutorial. What's your opinion on this vs emotion?

[@cyriljephery2662]

Thank you so much... definitely subscribing

[@danielfarkas2689]

Clean and understandable! Thank you!

[@PedroTechnologies]

Great to hear!

[@johndoggett4657]

Good tutorial man. Loved it. Some of the concepts remind me of Sass.

[@AntiPseudoPhilosopher]

Muito legal. Abriu muito a minha mente. Obrigado!

[@willvonarend]

Hi, thanks for that. How would you approach using CSS variables with Styled Components? So having a '--primary-color' for example

[@Deprecated446]

Super helpful, thanks!

[@thevloglife105]

Very nice. But you need to upload video regarding node-sass scss compile to css.

[@PedroTechnologies]

Thank you! I will take a look at that!

[@thearong_5853]

best video for beginner

[@ayushdedhia25]

So basically it follows the scss syntax to style our components... Right!? 😅😅

[@stevenchung934]

Super helpful, thanks man!

[@rustamov_vlogs]

Amazing as always, thank you 😊

[@PedroTechnologies]

Thank you!

[@securitytechtalk]

thnx sir this tutorial is very useful for me

[@nwabuzorchukwuemekaobiora7361]

This was super helpful.... 🔥🔥🔥🔥

[@ThColinPereira]

Amazing video! It helped me a lot!!

[@PedroTechnologies]

Glad you liked it!

[@josephwong2832]

great tutorial i subbed

[@0xPanda1]

very nice explanation , thank you very much

[@indiedy_ghaze0968]

Is this what I use for to syle my apps on andriod or ios?

[@PedroTechnologies]

You can use this for react native as well, so yes!

[@indiedy_ghaze0968]

@@PedroTechnologies Thank you so much! Thank you!

[@nikoletahroncova3342]

very good video, thank you very much for sharing!

[@Angels2welcome]

I loved the video you are such a good teacher! Can you make a video explaining how can I import fonts and use it in styled componets?

[@jpcc1223]

to use it, you need to import the font you want into your index.html file. After importing (for example, from google fonts), you can use it anywhere in you app

[@DaveTradeFx_01]

Can you make a video with data virtualization such as graph ... with react js

[@PedroTechnologies]

Yes I was already planning on a video on data visualization, so it will come out soon!

[@touseefahmad9794]

which is better withStyles or Styled???

[@worldclasscode1847]

Styled :)

[@chaswards]

Great video! Very informative! How would you say styled components compares to using CSS modules?

[@PedroTechnologies]

Thank you! I prefer styled-components becaause i believe it makes it easier for large companies to divide the work (ux/ui make the components and the frontend devs just use them). But both ways work well!

[@chaswards]

@@PedroTechnologies That makes sense, thanks!

[@antrahagure5372]

Thanks for video! Hiw to nest elopement in Styles ,like ul, li, a , hover ? In Sass nesting is easy but I couldn't understand how to do it with Stuled.

[@sonamohialdin3376]

So good tutorial

[@voncedrickbriones3995]

Why styled-components extension didn't work on my project? Can you help me how to fix that?

[@yugsoni2603]

thank you so much.

[@PedroTechnologies]

Always welcome

[@CH3THIN]

This is really good

[@karthikkhoday5555]

Can you tell me which extendion is used to show the file size next to import statements...

[@PedroTechnologies]

Its called "import cost"

[@karthikkhoday5555]

@@PedroTechnologies thanks 🙂

[@Sameer.Trivedi]

20:42 I was once pulling out my hair for that exact thing why do we even need the className gosh, its just to waste devs' time.

[@Ram-ry2sd]

Very nice! it's really simple! Thank you! But what about animations, media queries and browser prefixes?

[@AbdulRehman-vj7xu]

nice bro good to help me

[@francescoPace27]

Ty very usefull!

[@PB72UK]

Nice

[@worldclasscode1847]

Love the YT clip ! :)

[@irfanbaloch2884]

Awesome content

[@barca6097]

Thanks a lot ❤

[@mohamedyoussef8835]

Awesome ++++++++++++++ 🙂🙂

[@rangabharath4253]

awesome as always :-)

[@PedroTechnologies]

Thanks again!

[@leo-fv2nv]

can u share code that could b more helpful and it saves time.......i am happy with ur teaching.

[@live_emulator]

im really curious how responsiveness can apply to styled components or media querys.

[@ampomahwinston3436]

How do you handle media query on styled component

[@jakkenfive]

Great video, Pedro how old are you?

[@PedroTechnologies]

Thank you! I am 19!

[@umerfarooq3121]

Yeah Styled Components is awesome ;)

[@PedroTechnologies]

I love it! I use it in every single project!

[@umerfarooq3121]

@@PedroTechnologies That's great

[@joicyjoy9658]

You rocked

[@ashishthapa7768]

Well I watched your login with session video but i am getting issue on redirecting to profile dashboard so...I wish u will make solution on redirecting to profile dashboard after login much appreciate till yet.Thank You:-)

[@PedroTechnologies]

In react you can have a promise after the fetch request and use the useHistory hook in react router dom to redirect. I have a video explaining this: kzbin.info/www/bejne/pZDClK2nja-np80

[@kinoshan591]

Nice bro

[@PedroTechnologies]

Thanks!

[@macos-brasil1814]

Styled Component is the way people complicates styles using javascript instead of just understand how to make good CSS structures.

[@rowdypiper6172]

thank u

[@botisonny]

Perfect!

[@briandacallos4234]

Definitely he has a blood of legendary bucky roberts.

[@swiveiproduction9192]

would you recommend us to use styled components or CSS modules?

[@PedroTechnologies]

Styled Components!

[@trered21]

mine doesnt work help please. its not reading any of my commands from styled. it also doesnt auto fill elements so im assuming my package is bad but it is definitely installed

[@dleonardo8755]

first line in 10:43 what is the green text? how i can see this in my code