Styling React Components with CSS Modules

★☆★ My Courses: telmoacademy.com/
★☆★ 1-on-1 Mentorship: calendly.com/t...
★☆★ SkillShare 2 Months FREE : skl.sh/2Q2LsTi
★☆★UDEMY COURSES:
*The Complete JavaScript Course 2018: bit.ly/2Ci2Fzk
*Modern JavaScript From The Beginning: bit.ly/2Br13BM
*JavaScript: Understanding the Weird Parts: bit.ly/2Epdgu2
*React 16.6 - The Complete Guide (incl. React Router & Redux): bit.ly/2Br2ikq
*The Complete React Web Developer Course (with Redux): bit.ly/2zXq9IH
React Front To Back: bit.ly/2STDUPo
★☆★Best laptops for Coding:
Acer Aspire: amzn.to/2FJrOVh
Macbook Pro 2013: amzn.to/2NbYIUp
Asus VivoBook Pro: amzn.to/2YgrCUG
Macbook Pro 2019: amzn.to/2Xzi4qG
★☆★Best JavaScript Books
John Duckett JavaScript: amzn.to/2EAEvkj
JavaScript Easy Steps: amzn.to/2VRM4sN
JavaScript Good Parts: amzn.to/2EFul1V
Eloquent JavaScript: amzn.to/2Quq5qH
You dont know JavaScript: amzn.to/2K9I9VX
My Social Media:
Twitter: / devtelmo
Instagram: / sampaiotravels

[@bkatsevych]

Probably the best explanation of CSS Modules you can find on UA-cam. Thanks a lot, Telmo!

[@Webtricker]

Thank you so much for explaining React components with CSS modules in such a simple and beautiful way. That was very helpful

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

[@danieltkach2330]

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

[@cesarcortes5063]

i was looking everywhere because i had very problems with the css styles , and you have resolved it, thanks a lot Telmo

[@troubledtom5250]

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]

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.

[@jiharedconteh4530]

This video is very useful for styling individual components. Thank you for such a simplified explanation.

[@OneBrokeBloke]

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?

[@NoajmHeritage]

Prefect. Chatgpt failed to give me this option.
Amazing for no css conflict

[@lingolearner27]

you solved my problem. was stuck with this for couple of hours. thank you bro.

[@SofiaBelchiorinho]

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!

[@yinkagiwa8659]

I love how clear the video is

[@nathanvsplayer]

Great video helped me understand css modules

[@Viktorres1]

Thanks for your video. I fastly reminded how to connect css (scss) modules.

[@Viralvlogvideos]

UA-camrs like you deserves lot of subs. I subbed you. Please do make React tutorials in depth with building projects like TODO and ecommerce etc.

[@kunaljethva9623]

Thanks for making this video was searching for it since 😊😊

[@electricindro2236]

Thank you for explaining the importance of React css module

[@FaselGodbcho]

thank u, I was so frustrated and this video helped a lot

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

[@omotehinseelvis9845]

So simple and straight forward....I love it. Thank you

[@Trafficfromsky]

how do you target/change the tag without a class name?

[@itouchgrass869]

Just use “body” selector without a class

[@pumdu]

Thanks a lot. I wondered why I need to use CSS module and this video made it clear to me. :)

[@victoradodo8377]

Special thanks YOU deserved NATIONAL AWARD

[@faustovii1085]

man you are a god of teaching for sure

[@rakhmatillorakhmonberdiev231]

Thanks bro, that is what I expected to understand this topic, very clear explanation!

[@coding_stuff_uz]

Tankyou bro for this tutorial

[@nishantsinha4336]

Made it look simple.Well explained!

[@mathiasmatanda8848]

You saved me from a big headache thank you man!

[@gregduke8193]

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.

[@raunakkumar6144]

Thanks man , I was having exact same problem

[@AYUSHSHARMAblogs]

Lots of thanks for such a wonderful video on css modules

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

[@patcodingcodester9781]

Haha thank you!. This is exactly what I was looking for but it was hard to find..

[@qanswered319]

Great video.understood module clearly. No time wasted

[@ramon4756]

Thanks you! Explained my issue

[@anaisrevellat5692]

Thank you this tutorial is crystal clear , perfect.

[@teeyiheng4697]

I understand why use css module now thank😆

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

[@mehmetcelmeli9918]

Thank you for simple explantion TELMO✌✌✌✌we are looking forward to the others videos😊😊😊

[@codelightsparkles2403]

You’re awesome Telmo

[@Telmosampaio]

Thanks Code Light 😊

[@shubhamkaushal2125]

really like your accent very good way of teaching

[@muzammil6651]

What a fantastic explanation, thank you so much

[@pravinchoudhary5105]

Thanks Man, Helped a lot

[@davidorevic6651]

Should we do it for every single class?

[@siaxiong333]

Very usefull and great video! I like that you're straight to the point. Thank you so much!

[@vigneshwarvenugopal922]

Thank you so much dude.,
problem solving .,
i score you 100 of 100...🌟🌟🌟

[@heikkiladau6872]

Can you add css styles inside of the script tag in react application?

[@ghofranedarragi5601]

thank u .simple and clear explanation .it's useful

[@mendibhut4855]

Thank you, man. It really helps me a lot.

[@herlandertavares7573]

Great video. I didnt even have to see your name, I knew by your accent you were Portuguese lol. Obrigado pelo video

[@slipstream01]

excellent explanation. shukran

[@Lemon.8]

Thanks for the tutorial, very well explained.

[@ibrahimkhurshid4339]

Thanks buddy!! Jazakallah

[@mubashirwaheed474]

Thanks you so much for this video.

[@milkdrom3da]

Very useful! Thanks for sharing!

[@irorochadere9207]

Thanks, buddy.
It worked well for me.

[@davidgrig4608]

very helpful tutorual ty very much

[@sergiogarcia-di5nj]

really really helpful, thank you very much !

[@webdevvideos2744]

will using css module impact performance?

[@yuvarajg3855]

Thank you so much🤝

[@thisaraharshana2168]

Thank you sir. well explained!!.

[@gihanrangana6248]

how can i create global variables for scss modules?

[@jatinahuja6840]

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 👍

[@SatishKumar-qi4hb]

nice and helpful video. thx so much.

[@rohil3023]

Very useful. Thanks for the tutorial :)

[@davidlafontant2185]

Very useful. Thank you.

[@phuongla4512]

Thanks bro. This is useful

[@janardanpethani5755]

Thanks you for sharing 😀😀

[@hemantjadhav7833]

great video sir

[@angelmgl8137]

Nice video bro, thanks a lot

[@swerami]

thank you so much for this!

[@dashpindersingh9062]

Thanks dude:)

[@CodewithAby]

Good tutorial...it is timely

[@lyndonraya7769]

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
}
}
]
}
]
}
};

[@woolygan1529]

Helpful thanks

[@amershboul9107]

really helpful, thanks

[@Whisperme2sleep]

How do you do conditional classes with this technique?

[@roronoa_d_law1075]

this is not working for me, the style is still applied globally

[@arshadahamed988]

In module.css file can we create more than one class or Id in the file??

[@FlemerX]

Thank you

[@snake1625b]

className takes in a string but you're passing in a class, how is that possible. sorry if I missed the answer to this

[@ranati2000]

Can i use bootstrap classes in it ?

[@sharfarajahamed2568]

Thanks alot

[@arashvincent8519]

dose it work with sass ?

[@mahdouirami2776]

When i did it with a complicated name like form-control , it made me an error have u any solution ?

[@goncalosantos3604]

Excellent as always! Abraço

[@iamwright]

Very good.

[@abhishekprasad6317]

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]

got the solution stackoverflow.com/questions/33949469/using-css-modules-how-do-i-define-more-than-one-style-name

[@manasjoshi7037]

Thank you for this,

[@carlafaes9282]

buen video!muchas gracias :D

[@nullcarry6893]

Hate to say it but vue seems to have a better out of the box solution.

[@sebastianandersson6892]

04:06 sounded American for just a second there!

[@shrishri8453]

Tnq sm

[@miraasif3419]

Thankyou for this man @Telmo Sampaio

[@RoyerAdames]

And how do you add multiple class names?

[@Telmosampaio]

Styles.classname(‘${myclass1} ${myclass2}’)

[@ahmadcodes]

tnx

[@mshahid5122arid]

Thanks lokk from Pakistan

[@kaszapnagypeter]

Thanks a lot, mate! This is exactly what I was looking for! Is it required to give it a module name, or I can name it whatever I want to?

[@rakeshdontireddy6190]

Saved my anger...👍