Styled Components Full Tutorial - Style Your Components in React
ฝัง
- เผยแพร่เมื่อ 7 ก.ย. 2024
- ReactJS Styled Components tutorial! In this video I will go over everything you need to know about the library! Styled-Components is a css library in react which allow you to style components very easily!
-
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/l...
💻 PedroTech Discord: / discord
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Twitter: / pedrotech_
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/mac...
Email: machadop1407@gmail.com
Equipments I Use:
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
🌟 Algorithm Book To Pass Coding Interviews: amzn.to/2Z2CirS
🌟 Microphone: amzn.to/2MKAm4V
🌟 Keyboard: amzn.to/3tvU6ZR
🌟 HD Webcam: amzn.to/3tMpJPD
🌟 Room LED Lights: amzn.to/3a5mFGp
Tags:
- Styled-Components
- ReactJS Tutorial
- ReactJS
#styledcomponents #tutorial #reacttutorial
![ตีสิบเดย์ [FULL] | นางเอกหมอลำเงินล้าน "อุ๋งอิ๋ง เพชรบ้านแพง" & ไฮโซสาวสุดฮอต "ลิลลี่ เหงียน"](http://i.ytimg.com/vi/jPxQS_EgrJ4/mqdefault.jpg)
This is the first guy I've seen in my life with an imac and a mechanical keyboard.
You deserve a million subs for sharing such a great knowledge ☺️
Thank you!
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 +
Great to hear!
No around the bush, No waste of time, Just Did Perfect Job
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
Go for it :)
Nice job! FYI for anyone interested in what's going on under the hood, React is leveraging the Tagged Literals functionality of JavaScript.
Excellent tutorial. I am ready to and already applying styled components to my project.
thank you very much
This was the best video explaining how styled components work. THANK YOU!
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
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.
thanks for sharing this!
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
Great to hear!
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!
MAN !!!!! You made it look so easy and ABSOLUTELY UNDERSTANDABLE!!!
Thank you so much. You are the best !!!
If i need some skill's how to use, Pedro always uploaded already. Your best guide I ever met
it is the easiest and the most clear explanation of style component..thank you bro🙏🙏🙏
Thank you very much! Glad you liked it!
@@PedroTechnologies agree, thank you very much
This is what i was looking for thanks mate
Glad I could help
Thanks....man...this is what exactly I needed.....these days...you are like a savior in my react learning journey !
explained very well, i appreciate you going through the small nuances and giving us reference examples!
& 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.
you can use that vscode plugin that help you rename your jsx tags
Nice rundown of styled components
I agree :)
Seriously, thank you a lot for this video!
Loved the video. But in case you didn't know, styled-components uses SCSS. that's how it's providing all these extra functionalities.
I love the way you've approached this topic! Well done, bro!
Great video! Very informative!
It's very good. I love Styled Components
Thank you so much, you have answered so many questions I had. Thanks again.
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
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 ;)
Cheers dude, this is a great introduction to using styled-components. It's helped me a lot!
Nice, enjoyed your lectures please keep up with the good work.
one of th best video on styeld comp. i realy appriciate your effort
Thanks a lot 😊
hey Pedro! could you please make a video on testing components? thanks.
Absolutely, will put that in the list!
Hey great tutorial. What's your opinion on this vs emotion?
This makes code looks so clean
Yess! I absolutely love projects structured using styled components!
Hi, thanks for that. How would you approach using CSS variables with Styled Components? So having a '--primary-color' for example
So basically it follows the scss syntax to style our components... Right!? 😅😅
best video for beginner
You made it easy...thank you
You're welcome 😊
Thank you so much... definitely subscribing
How can I use the link with styled- Components?
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 :)
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.
learnt a lot at first go with this tutorial. Kudos Man !
it's a good summary, thanks!
really easy to understand and helpful thanks
Glad to hear that!
Awesome video, and most useful so far, thank you man! :D
Glad it helped!
It's the best explanation for me, thank you very much!
That's a pure gold knowledge!
So happy I found this channel. 💓
Explained very well, I appreciate it, keep it up
Muito legal. Abriu muito a minha mente. Obrigado!
Why styled-components extension didn't work on my project? Can you help me how to fix that?
Very nice. But you need to upload video regarding node-sass scss compile to css.
Thank you! I will take a look at that!
Simple and very effective
Thank you.
just clever as always.. thanks
Clean and understandable! Thank you!
Great to hear!
Thanks! Very useful content. Clear & concise.
Super helpful, thanks!
Excellent.
Awesome! I also use this in every project :)
Good tutorial man. Loved it. Some of the concepts remind me of Sass.
Amazing as always, thank you 😊
Thank you!
thank you so much.
Always welcome
Can you make a video with data virtualization such as graph ... with react js
Yes I was already planning on a video on data visualization, so it will come out soon!
great tutorial i subbed
Great video! Very informative! How would you say styled components compares to using CSS modules?
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!
@@PedroTechnologies That makes sense, thanks!
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?
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
Amazing video! It helped me a lot!!
Glad you liked it!
thnx sir this tutorial is very useful for me
Super helpful, thanks man!
very nice explanation , thank you very much
can u share code that could b more helpful and it saves time.......i am happy with ur teaching.
This was super helpful.... 🔥🔥🔥🔥
Can you tell me which extendion is used to show the file size next to import statements...
Its called "import cost"
@@PedroTechnologies thanks 🙂
im really curious how responsiveness can apply to styled components or media querys.
So good tutorial
very good video, thank you very much for sharing!
Very nice! it's really simple! Thank you! But what about animations, media queries and browser prefixes?
nice bro good to help me
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
Ty very usefull!
Is this what I use for to syle my apps on andriod or ios?
You can use this for react native as well, so yes!
@@PedroTechnologies Thank you so much! Thank you!
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:-)
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: th-cam.com/video/o__czqXJtqk/w-d-xo.html
Awesome content
How do you handle media query on styled component
Valeu!
Obrigado! Fico feliz que gostou :)
You rocked
which is better withStyles or Styled???
Styled :)
Awesome ++++++++++++++ 🙂🙂
good tutorial 8.78/10
This is really good
Anyone here can tell what plugin is using to show the size of the npm package ?
Yeah Styled Components is awesome ;)
I love it! I use it in every single project!
@@PedroTechnologies That's great
thank u
first line in 10:43 what is the green text? how i can see this in my code
would you recommend us to use styled components or CSS modules?
Styled Components!
Thanks a lot ❤
Definitely he has a blood of legendary bucky roberts.
Great video, Pedro how old are you?
Thank you! I am 19!
css in js or css modules which need choose for reactjs ?
Both are good, I like using styled components more!
awesome as always :-)
Thanks again!