Tap to unmute

Styling React Components with CSS Modules

  Рет қаралды 106,156

Telmo Sampaio

Telmo Sampaio

Күн бұрын

Пікірлер: 131
@bkatsevych
@bkatsevych 2 жыл бұрын
Probably the best explanation of CSS Modules you can find on KZbin. Thanks a lot, Telmo!
@Webtricker
@Webtricker 2 жыл бұрын
Thank you so much for explaining React components with CSS modules in such a simple and beautiful way. That was very helpful
@daftkiwi
@daftkiwi Жыл бұрын
Before watching this tutorial, I used to find css modules and its import and reference styles using JavaScript syntax quite complex for its benefits. That's why I avoided modules like the plague. Thank you Telmo, this was very helpful!
@coding_stuff_uz
@coding_stuff_uz 9 ай бұрын
Tankyou bro for this tutorial
@cesarcortes5063
@cesarcortes5063 Жыл бұрын
i was looking everywhere because i had very problems with the css styles , and you have resolved it, thanks a lot Telmo
@troubledtom5250
@troubledtom5250 11 ай бұрын
honestly as someone who just came here to learn about css in react... you taught me a new concept i didn't knew about thanks
@redefamatv
@redefamatv 3 жыл бұрын
Thanks for sharing Telmo, Im still learning the basics of react but it was a really helpful tutorial to strengthen my basic knowledge in order to going forward to more advanced tips very soon...hugs from Brazil...just keep it up.
@sketchychillandchill
@sketchychillandchill Жыл бұрын
It's cool when there is like 2 styles to scope but when you want it scoped for each components just switch to vuejs
@danieltkach2330
@danieltkach2330 3 жыл бұрын
You rock. Thanks for the instruction. Why everyone says we have to either eject or install some script modules from start? What you describe works just fine...
@lingolearner27
@lingolearner27 9 ай бұрын
you solved my problem. was stuck with this for couple of hours. thank you bro.
@yinkagiwa8659
@yinkagiwa8659 3 жыл бұрын
I love how clear the video is
@digvijayyamagekar4300
@digvijayyamagekar4300 Жыл бұрын
I had one question. let's say there are two components, A and B and two CSS files A.css and B.css, and compo A and B have several in them now let's say I want to color all buttons in A red and all buttons in B blue. can I solve this problem without giving the class name to ?
@kunaljethva9623
@kunaljethva9623 3 жыл бұрын
Thanks for making this video was searching for it since 😊😊
@nathanvsplayer
@nathanvsplayer 2 жыл бұрын
Great video helped me understand css modules
@jiharedconteh4530
@jiharedconteh4530 Жыл бұрын
This video is very useful for styling individual components. Thank you for such a simplified explanation.
@nishantsinha4336
@nishantsinha4336 Жыл бұрын
Made it look simple.Well explained!
@SofiaBelchiorinho
@SofiaBelchiorinho 3 жыл бұрын
Very useful vídeo :) I was using this technique already (because it comes with Nx workspaces) but I ddin't know it was called CSS Modules. Keep up the good work!
@faustovii1085
@faustovii1085 2 жыл бұрын
man you are a god of teaching for sure
@Trafficfromsky
@Trafficfromsky 3 жыл бұрын
how do you target/change the tag without a class name?
@itouchgrass869
@itouchgrass869 2 жыл бұрын
Just use “body” selector without a class
@rakhmatillorakhmonberdiev231
@rakhmatillorakhmonberdiev231 3 жыл бұрын
Thanks bro, that is what I expected to understand this topic, very clear explanation!
@Viktorres1
@Viktorres1 2 жыл бұрын
Thanks for your video. I fastly reminded how to connect css (scss) modules.
@omotehinseelvis9845
@omotehinseelvis9845 Жыл бұрын
So simple and straight forward....I love it. Thank you
@pravinchoudhary5105
@pravinchoudhary5105 2 жыл бұрын
Thanks Man, Helped a lot
@AYUSHSHARMAblogs
@AYUSHSHARMAblogs 2 жыл бұрын
Lots of thanks for such a wonderful video on css modules
@codelightsparkles2403
@codelightsparkles2403 4 жыл бұрын
You’re awesome Telmo
@Telmosampaio
@Telmosampaio 4 жыл бұрын
Thanks Code Light 😊
@mehedi13577
@mehedi13577 Жыл бұрын
Thank you, man. It really helps me a lot.
@Mattyamungu
@Mattyamungu 2 ай бұрын
Thanks you. Was wondering why I was having issues sizing my page
@muzammil6651
@muzammil6651 Жыл бұрын
What a fantastic explanation, thank you so much
@qanswered319
@qanswered319 3 жыл бұрын
Great video.understood module clearly. No time wasted
@anaisrevellat5692
@anaisrevellat5692 2 жыл бұрын
Thank you this tutorial is crystal clear , perfect.
@Viralvlogvideos
@Viralvlogvideos 2 жыл бұрын
KZbinrs like you deserves lot of subs. I subbed you. Please do make React tutorials in depth with building projects like TODO and ecommerce etc.
@FaselGodbcho
@FaselGodbcho 8 ай бұрын
thank u, I was so frustrated and this video helped a lot
@mathiasmatanda8848
@mathiasmatanda8848 2 жыл бұрын
You saved me from a big headache thank you man!
@milkdrom3da
@milkdrom3da 2 жыл бұрын
Very useful! Thanks for sharing!
@pumdu
@pumdu 3 жыл бұрын
Thanks a lot. I wondered why I need to use CSS module and this video made it clear to me. :)
@heikkiladau6872
@heikkiladau6872 8 ай бұрын
Can you add css styles inside of the script tag in react application?
@sergiogarcia-di5nj
@sergiogarcia-di5nj Жыл бұрын
really really helpful, thank you very much !
@NoajmHeritage
@NoajmHeritage 10 ай бұрын
Prefect. Chatgpt failed to give me this option. Amazing for no css conflict
@ghofranedarragi5601
@ghofranedarragi5601 3 жыл бұрын
thank u .simple and clear explanation .it's useful
@Whisperme2sleep
@Whisperme2sleep 2 жыл бұрын
How do you do conditional classes with this technique?
@siaxiong333
@siaxiong333 2 жыл бұрын
Very usefull and great video! I like that you're straight to the point. Thank you so much!
@swerami
@swerami 3 жыл бұрын
thank you so much for this!
@ramon4756
@ramon4756 Жыл бұрын
Thanks you! Explained my issue
@davidlafontant2185
@davidlafontant2185 2 жыл бұрын
Very useful. Thank you.
@patcodingcodester9781
@patcodingcodester9781 3 жыл бұрын
Haha thank you!. This is exactly what I was looking for but it was hard to find..
@Orevitalizador
@Orevitalizador Жыл бұрын
thank u sr, this tutorial was very usefull for me , and im glad, the way u used to explain , gave me some Brainstorming thanks guy.
@electricindro2236
@electricindro2236 2 жыл бұрын
Thank you for explaining the importance of React css module
@phuongla4512
@phuongla4512 3 жыл бұрын
Thanks bro. This is useful
@Lemon.8
@Lemon.8 3 жыл бұрын
Thanks for the tutorial, very well explained.
@slipstream01
@slipstream01 2 жыл бұрын
excellent explanation. shukran
@ranati2000
@ranati2000 2 жыл бұрын
Can i use bootstrap classes in it ?
@victoradodo8377
@victoradodo8377 2 жыл бұрын
Special thanks YOU deserved NATIONAL AWARD
@janardanpethani5755
@janardanpethani5755 3 жыл бұрын
Thanks you for sharing 😀😀
@rohil3023
@rohil3023 3 жыл бұрын
Very useful. Thanks for the tutorial :)
@goncalosantos3604
@goncalosantos3604 4 жыл бұрын
Excellent as always! Abraço
@thisaraharshana2168
@thisaraharshana2168 3 жыл бұрын
Thank you sir. well explained!!.
@SatishKumar-qi4hb
@SatishKumar-qi4hb 3 жыл бұрын
nice and helpful video. thx so much.
@irorochadere9207
@irorochadere9207 4 жыл бұрын
Thanks, buddy. It worked well for me.
@mubashirwaheed474
@mubashirwaheed474 3 жыл бұрын
Thanks you so much for this video.
@webdevvideos2744
@webdevvideos2744 2 жыл бұрын
will using css module impact performance?
@amershboul9107
@amershboul9107 3 жыл бұрын
really helpful, thanks
@raunakkumar6144
@raunakkumar6144 Жыл бұрын
Thanks man , I was having exact same problem
@gihanrangana6248
@gihanrangana6248 3 жыл бұрын
how can i create global variables for scss modules?
@angelmgl8137
@angelmgl8137 3 жыл бұрын
Nice video bro, thanks a lot
@mehmetcelmeli9918
@mehmetcelmeli9918 2 жыл бұрын
Thank you for simple explantion TELMO✌✌✌✌we are looking forward to the others videos😊😊😊
@matiascstudios
@matiascstudios 3 жыл бұрын
Thanks a lot!
@arashvincent8519
@arashvincent8519 2 жыл бұрын
dose it work with sass ?
@davidgrig4608
@davidgrig4608 3 жыл бұрын
very helpful tutorual ty very much
@ibrahimkhurshid4339
@ibrahimkhurshid4339 2 жыл бұрын
Thanks buddy!! Jazakallah
@hemantjadhav7833
@hemantjadhav7833 3 жыл бұрын
great video sir
@woolygan1529
@woolygan1529 2 жыл бұрын
Helpful thanks
@arshadahamed988
@arshadahamed988 8 ай бұрын
In module.css file can we create more than one class or Id in the file??
@markokoth5609
@markokoth5609 4 жыл бұрын
Hey Telmo how are you. What's the theme you are using on the vs code?
@Telmosampaio
@Telmosampaio 4 жыл бұрын
Hi Mark, I'm using the Cobalt2 theme
@markokoth5609
@markokoth5609 4 жыл бұрын
@@Telmosampaio alright thanks
@RoyerAdames
@RoyerAdames 3 жыл бұрын
And how do you add multiple class names?
@Telmosampaio
@Telmosampaio 3 жыл бұрын
Styles.classname(‘${myclass1} ${myclass2}’)
@manasjoshi7037
@manasjoshi7037 3 жыл бұрын
Thank you for this,
@OneBrokeBloke
@OneBrokeBloke 2 жыл бұрын
I get the problem it solves, just not why the problem is there in the first place. Like, we have a component called Example.js In that, we import example.css So since this is the only place that this CSS is imported and therefore used, why can it conflict with other components? They havent linked/imported the stylesheet?
@CodewithAby
@CodewithAby 3 жыл бұрын
Good tutorial...it is timely
@carlafaes9282
@carlafaes9282 3 жыл бұрын
buen video!muchas gracias :D
@davidorevic6651
@davidorevic6651 Жыл бұрын
Should we do it for every single class?
@dashpindersingh9062
@dashpindersingh9062 Жыл бұрын
Thanks dude:)
@igelkotte
@igelkotte 2 ай бұрын
This seems more complex than to just use a different css class name. What's the benefits? I'm new so I'm probably missing something
@mahdouirami2776
@mahdouirami2776 3 жыл бұрын
When i did it with a complicated name like form-control , it made me an error have u any solution ?
@sane4959
@sane4959 2 жыл бұрын
Thanks alot
@teeyiheng4697
@teeyiheng4697 2 жыл бұрын
I understand why use css module now thank😆
@roronoa_d_law1075
@roronoa_d_law1075 2 жыл бұрын
this is not working for me, the style is still applied globally
@tamahome99
@tamahome99 Жыл бұрын
you did not include on your tutorial that we need to do this , module.exports = { module: { rules: [ { test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: true } } ] } ] } };
@sebastianandersson6892
@sebastianandersson6892 2 жыл бұрын
04:06 sounded American for just a second there!
@gregduke8193
@gregduke8193 11 ай бұрын
Great video, very well explained. I don't really see the point in using modules though... you have to type a lot more code for it to just add a unique classname in the end anyway so why not use id for individual styling and then you can use classnames for universal styling? Like if I wanted all the buttons to have 20px padding I could give them the classname of btn and give them all 20px padding and then I could use an id for each button also to, for example, change the background color if I wanted them to have different background colors.
@shubhamkaushal2125
@shubhamkaushal2125 10 ай бұрын
really like your accent very good way of teaching
@jatinahuja6840
@jatinahuja6840 3 жыл бұрын
Thank you for helping man! 🙌 Please keep making such videos 🥇🎖 Can you also tell how to use css modules concept with bootstrap or I will say if I want to use bootstrap different version. Thanks in advance 👍
@dungvu8790
@dungvu8790 3 жыл бұрын
thank you
@herlandertavares7573
@herlandertavares7573 2 жыл бұрын
Great video. I didnt even have to see your name, I knew by your accent you were Portuguese lol. Obrigado pelo video
@abhishekprasad6317
@abhishekprasad6317 3 жыл бұрын
What if i have to apply two classname will I do :- className={stylesCSS.firstclass} className={stylesCSS.secondclass} ? or i have any option similar to: className={stylesCSS.firstclass, stylesCSS.secondclass} ??
@abhishekprasad6317
@abhishekprasad6317 3 жыл бұрын
got the solution stackoverflow.com/questions/33949469/using-css-modules-how-do-i-define-more-than-one-style-name
@iamwright
@iamwright 2 жыл бұрын
Very good.
@vigneshwarvenugopal922
@vigneshwarvenugopal922 10 ай бұрын
Thank you so much dude., problem solving ., i score you 100 of 100...🌟🌟🌟
@RahulKumar-cq2es
@RahulKumar-cq2es Ай бұрын
hitting the subscribe button right now
@shrishri8453
@shrishri8453 2 жыл бұрын
Tnq sm
@miraasif3419
@miraasif3419 4 ай бұрын
Thankyou for this man @Telmo Sampaio
@snake1625b
@snake1625b 2 жыл бұрын
className takes in a string but you're passing in a class, how is that possible. sorry if I missed the answer to this
@srikantaprasadrajeurs5069
@srikantaprasadrajeurs5069 Жыл бұрын
tq
Why you should look into these React component styling options!
27:17
All The JavaScript You Need To Know For React
28:00
PedroTech
Рет қаралды 683 М.
24 Часа в БОУЛИНГЕ !
27:03
A4
Рет қаралды 7 МЛН
GIANT Gummy Worm #shorts
0:42
Mr DegrEE
Рет қаралды 152 МЛН
I built the same app 10 times // Which JS Framework is best?
21:58
Fireship
Рет қаралды 2,6 МЛН
Learn useState In 15 Minutes - React Hooks Explained
15:45
Web Dev Simplified
Рет қаралды 1,2 МЛН
The Best Way To Style Components In React | CSS Modules
4:35
The Ethical Technologist
Рет қаралды 22 М.
How To Debug React Apps Like A Senior Developer
21:07
Web Dev Simplified
Рет қаралды 191 М.
The Biggest Mistake Intermediate React Developers Make
18:32
Cosden Solutions
Рет қаралды 45 М.
CSS Styles in React JS | Learn ReactJS
7:29
Dave Gray
Рет қаралды 38 М.
All useEffect Mistakes Every Junior React Developer Makes
22:23
Learn CSS in 20 Minutes
23:44
Web Dev Simplified
Рет қаралды 1,9 МЛН
These CSS PRO Tips & Tricks Will Blow Your Mind!
8:48
Coding2GO
Рет қаралды 536 М.