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.

[@bilalch898]

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

[@PedroTechnologies]

Thank you!

[@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 :)

[@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!

[@mpilodlamini8407]

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

[@jaimemedina3351]

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

[@kalviyalkarpom4127]

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

[@PB3073]

Valeu!

[@PedroTechnologies]

Obrigado! Fico feliz que gostou :)

[@yamilmsilva]

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

[@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!

[@Sezar_SZ]

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

[@jamesdaniel597]

Nice rundown of styled components

[@worldclasscode1847]

I agree :)

[@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!

[@positivehandnegativehand]

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

[@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!

[@hellofriend3091]

This is what i was looking for thanks mate

[@PedroTechnologies]

Glad I could help

[@brandaoerick]

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

[@blueb06]

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

[@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

[@윤재희-m6k]

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

[@caffeinated-pixels]

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

[@sarahcalbez7104]

Seriously, thank you a lot for this video!

[@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

[@MrAndykofi]

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

[@tsdineshjai8565]

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

[@andarlin5312]

Great video! Very informative!

[@worldclasscode1847]

It's very good. I love Styled Components

[@musicmoi]

So happy I found this channel. 💓

[@mahfuzulhasan3108]

Explained very well, I appreciate it, keep it up

[@mikheilbeldishevski2776]

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

[@petarstrbad7191]

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

[@PedroTechnologies]

Glad it helped!

[@mayurghuge8846]

Thank you.

[@pjguitar15]

This makes code looks so clean

[@PedroTechnologies]

Yess! I absolutely love projects structured using styled components!

[@balazsbereczky595]

it's a good summary, thanks!

[@TheMyth2.9]

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

[@zafarhussain8273]

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

[@PedroTechnologies]

Thanks a lot 😊

[@limitless9483]

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

[@eliasimokhai]

You made it easy...thank you

[@PedroTechnologies]

You're welcome 😊

[@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!

[@danielfarkas2689]

Clean and understandable! Thank you!

[@PedroTechnologies]

Great to hear!

[@jordanmolina2351]

really easy to understand and helpful thanks

[@PedroTechnologies]

Glad to hear that!

[@ezbitz23]

Thanks! Very useful content. Clear & concise.

[@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 :)

[@AntiPseudoPhilosopher]

Muito legal. Abriu muito a minha mente. Obrigado!

[@benyaminyakobi3652]

That's a pure gold knowledge!

[@rustamov_vlogs]

Amazing as always, thank you 😊

[@PedroTechnologies]

Thank you!

[@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 ;)

[@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.

[@Anopeng]

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

[@Deprecated446]

Super helpful, thanks!

[@ThColinPereira]

Amazing video! It helped me a lot!!

[@PedroTechnologies]

Glad you liked it!

[@touseefahmad9794]

which is better withStyles or Styled???

[@worldclasscode1847]

Styled :)

[@varaprasad4163]

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

[@PedroTechnologies]

Absolutely, will put that in the list!

[@stevenchung934]

Super helpful, thanks man!

[@sonnix31]

Excellent.

[@ayushdedhia25]

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

[@cyriljephery2662]

Thank you so much... definitely subscribing

[@willvonarend]

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

[@balanepalaiyathane9714]

Simple and very effective

[@nwabuzorchukwuemekaobiora7361]

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

[@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.

[@worldclasscode1847]

Awesome! I also use this in every project :)

[@dleonardo8755]

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

[@voncedrickbriones3995]

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

[@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 🙂

[@johndoggett4657]

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

[@thearong_5853]

best video for beginner

[@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!

[@josephwong2832]

great tutorial i subbed

[@0xPanda1]

very nice explanation , thank you very much

[@nikoletahroncova3342]

very good video, thank you very much for sharing!

[@mohamedyoussef8835]

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

[@vlogging-nk]

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!

[@yugsoni2603]

thank you so much.

[@PedroTechnologies]

Always welcome

[@securitytechtalk]

thnx sir this tutorial is very useful for me

[@live_emulator]

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

[@barca6097]

Thanks a lot ❤

[@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.

[@francescoPace27]

Ty very usefull!

[@jakkenfive]

Great video, Pedro how old are you?

[@PedroTechnologies]

Thank you! I am 19!

[@swiveiproduction9192]

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

[@PedroTechnologies]

Styled Components!

[@samatzhussipov1139]

css in js or css modules which need choose for reactjs ?

[@PedroTechnologies]

Both are good, I like using styled components more!

[@ampomahwinston3436]

How do you handle media query on styled component

[@AbdulRehman-vj7xu]

nice bro good to help me

[@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!

[@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

[@Ram-ry2sd]

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

[@CH3THIN]

This is really good

[@sonamohialdin3376]

So good tutorial

[@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

[@PB72UK]

Nice

[@worldclasscode1847]

Love the YT clip ! :)

[@umerfarooq3121]

Yeah Styled Components is awesome ;)

[@PedroTechnologies]

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

[@umerfarooq3121]

@@PedroTechnologies That's great

[@simple8810]

Can we use Style components with react-bootstrap?

[@mansilaad2062]

Great 👍👍

[@PedroTechnologies]

Thank you! Cheers!

[@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.

[@akashshrestha01]

why my vscode is not suggesting css code completions?

[@akashshrestha01]

solution: just added an extension

[@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

[@f3-faithfitnessfinance]

6.66k subs🔥

[@PedroTechnologies]

hahaha almost getting to 10k 🔥🔥🔥

[@nafas-ki7ce]

👍👍👍

[@divance]

Anyone here can tell what plugin is using to show the size of the npm package ?

[@rowdypiper6172]

thank u