Styled Components Full Tutorial - Style Your Components in React
HTML-код
- Опубликовано: 24 авг 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
This is the first guy I've seen in my life with an imac and a mechanical keyboard.
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!
You deserve a million subs for sharing such a great knowledge ☺️
Thank you!
Nice job! FYI for anyone interested in what's going on under the hood, React is leveraging the Tagged Literals functionality of JavaScript.
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 :)
Excellent tutorial. I am ready to and already applying styled components to my project.
thank you very much
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!
This was the best video explaining how styled components work. THANK YOU!
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!
MAN !!!!! You made it look so easy and ABSOLUTELY UNDERSTANDABLE!!!
Thank you so much. You are the best !!!
This is what i was looking for thanks mate
Glad I could help
If i need some skill's how to use, Pedro always uploaded already. Your best guide I ever met
Thanks....man...this is what exactly I needed.....these days...you are like a savior in my react learning journey !
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!
explained very well, i appreciate you going through the small nuances and giving us reference examples!
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
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
Seriously, thank you a lot for this video!
Nice rundown of styled components
I agree :)
I love the way you've approached this topic! Well done, bro!
you can use that vscode plugin that help you rename your jsx tags
Thank you so much, you have answered so many questions I had. Thanks again.
Great video! Very informative!
It's very good. I love Styled Components
Nice, enjoyed your lectures please keep up with the good work.
Cheers dude, this is a great introduction to using styled-components. It's helped me a lot!
& 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.
So basically it follows the scss syntax to style our components... Right!? 😅😅
This makes code looks so clean
Yess! I absolutely love projects structured using styled components!
one of th best video on styeld comp. i realy appriciate your effort
Thanks a lot 😊
Hey great tutorial. What's your opinion on this vs emotion?
Loved the video. But in case you didn't know, styled-components uses SCSS. that's how it's providing all these extra functionalities.
So happy I found this channel. 💓
You made it easy...thank you
You're welcome 😊
it's a good summary, thanks!
learnt a lot at first go with this tutorial. Kudos Man !
That's a pure gold knowledge!
Hi, thanks for that. How would you approach using CSS variables with Styled Components? So having a '--primary-color' for example
best video for beginner
Explained very well, I appreciate it, keep it up
hey Pedro! could you please make a video on testing components? thanks.
Absolutely, will put that in the list!
really easy to understand and helpful thanks
Glad to hear that!
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 ;)
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!
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 :)
Clean and understandable! Thank you!
Great to hear!
Thank you so much... definitely subscribing
Why styled-components extension didn't work on my project? Can you help me how to fix that?
Thank you.
Super helpful, thanks!
Thanks! Very useful content. Clear & concise.
Muito legal. Abriu muito a minha mente. Obrigado!
just clever as always.. thanks
Simple and very effective
Amazing as always, thank you 😊
Thank you!
Excellent.
Amazing video! It helped me a lot!!
Glad you liked it!
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.
great tutorial i subbed
Awesome! I also use this in every project :)
Super helpful, thanks man!
Good tutorial man. Loved it. Some of the concepts remind me of Sass.
Very nice. But you need to upload video regarding node-sass scss compile to css.
Thank you! I will take a look at that!
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!
thank you so much.
Always welcome
very nice explanation , thank you very much
This was super helpful.... 🔥🔥🔥🔥
thnx sir this tutorial is very useful for me
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!
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
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
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!
Ty very usefull!
nice bro good to help me
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?
awesome as always :-)
Thanks again!
which is better withStyles or Styled???
Styled :)
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
You rocked
would you recommend us to use styled components or CSS modules?
Styled Components!
Awesome content
This is really good
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: ruclips.net/video/o__czqXJtqk/видео.html
css in js or css modules which need choose for reactjs ?
Both are good, I like using styled components more!
Thanks a lot ❤
Definitely he has a blood of legendary bucky roberts.
How do you handle media query on styled component
first line in 10:43 what is the green text? how i can see this in my code
Awesome ++++++++++++++ 🙂🙂
can u share code that could b more helpful and it saves time.......i am happy with ur teaching.
Valeu!
Obrigado! Fico feliz que gostou :)
Yeah Styled Components is awesome ;)
I love it! I use it in every single project!
@@PedroTechnologies That's great
good tutorial 8.78/10
Anyone here can tell what plugin is using to show the size of the npm package ?
6.66k subs🔥
hahaha almost getting to 10k 🔥🔥🔥
Can we use Style components with react-bootstrap?