Why you should look into these React component styling options!

Styling React components is easy and difficult at the same time. There are so many options! Inline styles, styled components, vanilla CSS, CSS modules and more. Let's take a closer look at the best alternatives!
Join the full "React - The Complete Guide" course: acad.link/reactjs
This course might also be interesting: "React Native - The Practical Guide": acad.link/react-native
This video comes with an article you shouldn't miss! You also find all the source code links there: www.academind.com/learn/react...
Check out all our other courses: academind.com/learn/our-courses
----------
• Go to www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts
• Follow @maxedapps and @academind_real on Twitter
• Follow @academind_real on Instagram: / academind_real
• Join our Facebook community on / academindchannel
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

[@TheAkiller101]

This guy is personally responsible for like 60% of my coding knowledge

[@generalwill10]

For real. His React course on Udemy *chefs kiss*

[@gvsakhil143]

You are my lifesaver Max. I learned Angular from your course before a year and now I am in very good job. I also learned Nodejs and I am now also a FullStack and MeanStack Developer. Thanks a lot again. Keep going on we support u :)

[@academind]

Thanks so much for your awesome feedback and support!

[@amalitsky]

Man, I love you for introducing separate CSS file and BEM naming concept! Thank you so much! Didn't see that coming in react corner of frontend world. IMO simply the best approach of all. CSS modules is like a cherry on top of the cake

[@Thewowhahahawow]

Great tutorial, I love how you explain how certain code operates behind the scene (example: 8:35 ) . It really gives us deeper understanding into the code you're writing unlike most tutorials on youtube which are often just copy and write. I think this is what differentiates from a average developer to a great developer and I'm very glad you are spreading this deeper knownlowdge across to your students online. This is a KEY difference that stands out in your tutorials. Keep it up! :)

[@waldiniman]

Thank you my dude. You're exceptionally lucid in your descriptive modeling of concepts, and have a real talent for communicating the various aspects concisely, yet thoroughly. Very helpful.

[@villerintala7777]

No matter what programming tutorial I am looking for, nowadays I come directly to check Max's video if it exists about that topic. Always the most straight-forward and understandable approach. Time well spent. Thanks, keep these coming!

[@academind]

That's so great to read Ville, thank you very much!

[@luis_soul1]

You’re the best man. I wasn’t sure what are the best practices to css my react project and I was struggling a lot. It’s a small application with 3 pages. Now I can decide which one fits better for my project. Personally, even though it’s a small project, I really believe that CSS Modules are the best method and more comfortable than the other options. Like you said it gives you the best of both worlds. Thank you so much for sharing knowledge, you’re the best.

[@orimazrafi9978]

Amazing how much material you squeeze into one video. that set right many things for me. Thank you!

[@matthewwhite3744]

This is exactly what I was looking for to solve an issue where I had multiple different buttons in an app that I wanted to have their own styles, but not use inline styling. Thanks a million!

[@fhelipeturati1483]

Max, you are the man! Thank you so much for all your videos!!

[@zakarygriffin3280]

Your videos are a breath of fresh air in the developer world. It's not often that I find creators that explain things so clearly and elegantly. Thank you, this is just what I needed.

[@academind]

Wow, thank you very very much for these wonderful words Zakary!

[@anilmohan9961]

Very well explained. Liked the way Maximilian presented the concepts here, as he always does!

[@prasangsharma7]

Very well explained. Highly recommended for anyone who has recently started learning React.

[@crystalclear178]

Now I'm more confused... please tell me how we should use css in proper way...there are too many ways which should we use??

[@arishshah1142]

Thanks! I really wanted to learn Styled Components and using CSS modules without running `npm run eject`.

[@badytouray294]

Love this video :-) Easy to understand and no effort at all 😎 Keep the content coming guys.

[@HIghtowerSever]

Useful material. Thanks a lot Max!

[@StrangeIndeed]

I was confused by all the options and this video made it all clear to me. Thanks c:

[@theycallmewolf]

Dude!! Big like from a Portuguese junior coder!

[@Apparentt]

I would personally highly recommend react-jss for styling components, I think what’s missed which is the real strength of the mentioned package (as well as styled-components, amongst others) is being able to pass a theme around to components and also being able to access component props within the styling; the latter can become very cumbersome using vanilla css or css modules (having to toggle class names based on props or state)

[@NeerajLagwankar]

This. I was introduced to JSS via Material UI and I honestly cannot go back to only CSS or other CSS in JS solutions. The amount of flexibility you get is mind boggling.

[@reactstuffreact4500]

great videos, good paced. thank you

[@omriterem6448]

Amazing video. Thanks Max

[@bayasahamed1815]

Thanks for the clear explanation max.

[@rk_nyra]

Very helpful! Thanks for sharing this!!

[@Pareshbpatel]

Excellent Overview on React Component Styling {2021-09-27} , {2022-02-28}

[@ernestomotta5178]

This is pure gold, Thank you!

[@saramshshrestha7641]

Thank You So Much Max.

[@TitiloTeam]

Excellent Video! Thanks a lot!

[@helinli7093]

thank you! really helpful!

[@bohodirrahmonov8021]

Thanks bro vey much. Untilk this day i dont have been found this kind of information

[@diondreedwards30]

Hey, great video. What do you think about styled-jsx?

[@ek4m81]

is the last one same with using "use npm eject and configure webpack"?

[@itzsrikanth]

Awesome video, Max. Can you please tell us your personal take on FCP for CSS-in-JS solutions?

[@kazenohito7641]

Amazingly well thought out. I'm an Angular guy so jsx is still REALLY weird to me but this makes alot of sense. css in js and js to write html embedded with css is a whole topic, seemingly almost native to react.

[@academind]

Thank you very much for your fantastic feedback Kaze!

[@stannone7272]

Since you can explain so well. I would appreciate some advanced topics explained.

[@kwasnakawa]

Great video. Thanks!

[@fluntimes]

I learned CSS Modules in Gatsby and thought, "wow, these are cool". Not long after that I learned about Styled Components and thought, "this is possibly the greatest package ever added to React. Seriously, if I have to use a global CSS file in React now I feel a bit weird!?

[@hettalamazigh6251]

Thank you so much

[@nwobodogeorge5370]

Thank man. I love it.

[@neosarchizo]

Thanks for good video!!

[@BrownieloveMike]

Hi Max How do i get hold of you with regards to crating an app? I could not find clear company contacts on your website.

[@TheEtsgp1]

Hey what camera and video setup do you use in you studio to get such clean high def videos. Camera? Mics? lights? Ect?? Thanks

[@webentwinkler]

Great comparison, Max. I'm also completely on board when it comes to preferences: Using inline-styles outside of the occasional hard override is a cardinal sin in any web project, no matter the framework/library. I found that styled components, while being a bit better, are still not preferable, because it still sacrifices useful CSS features as the cascade and inheritance. The only good use I found for it is when working with React transition groups with custom animations, for that purpose it is actually very well suited. It actually never made sense to me why anyone would want to force CSS into JS completely. HTML, CSS and JS are three separate technologies that, while of course being designed to work together in unison, are separate for a reason and trying to force one or two of them into the other always comes with huge drawbacks while bringing little to no gain. And while IDEs are smart enough now that they no longer stumble across JSX, styling is still an entirely different beast. And, as you said, if a project has dedicated UI and Business Logic developers, forcing the UI guys to deal with JS files is just bad for everybody. The UI dev gets thrown out of their comfort zone, no longer can have proper IDE support and useful helpers like stylelint and just has a harder time overall. And on top of that, at least when using inline styles or styled components that are defined inside the component they belong to, they constantly produce merge conflicts for the JS devs, who also have to deal with larger files which makes then less readable. What I never understood regarding CSS Modules in React is why they thought they'd have to completely obfuscate the class names. That makes it unnecessarily difficult to debug CSS issues, because one cannot simply copy the class name and search for its style definition in the code base. In my opinion, the best approach to this has been achieved by Svelte, where they keep the original class name from the CSS definition, but for scoped styles they simply add the unique class name to the same element and then the style definition output changes from the source ".my-class-name{ ... }" to ".my-class-name.uniqueClass{ ... }". Why did no one think of that before? But then again, that is a question I asked myself all the time while learning about Svelte... ;-) Congratulations on your great Udemy Svelte course by the way, Max, I cannot recommend that enough! Anyway, back to topic: All those reasons listed above are why, for the react project I'm currently working on (which is based on react-boilerplate which normally uses styled components per default but we only kept them in for transitions) we are using separate SCSS files (one in each component/container folder), which are automatically found and grouped together by webpack, together with a bunch of global definitions for inheritance (like base styling, CSS reset rules, etc.) and simply adhere to BEM conventions. Tried and true and still works best, especially for separation of concerns.

[@crystalclear178]

Exactly.. . totally agree...I thought I'm new in react and that's why it feeling weired with these css and react thing...i thought ill get better understanding and will figure out the actual way of including CSS in react....but I think thr is no way...

[@ramasamynp8175]

Could you please upload videos for storybook react ui components ?

[@jshtmlcss]

Grate vid, from my 20 years experience: CSS Module was looking like the best option however what if i want to refer to the defined className i defined in a global css file ( with a sector like .xyz {color:green }, I would not be able to as the className name will be renamed by the webpack loader. StyleCompoents slows down the coding , why should I have to build a wrapper for every object , even a simple DIV , and clutter up my project with all this code, that also using uncommon JS Tag Template Syntax , however i found it good to inject values from jsx into it to create dynamic styles. I found using one global css file for shared css is a better way , having all css in one file ( editors these days will tell you if something is broken, no need to make one new css file per component , cluttering up my code base with simple styles ) and then if i need to change a style based on some user preference or some other state, i can override it with inline styles. I like to keep things simple, easy to read , easy to learn , less code , less files means less code that to brake , less code to test,. This allows me to have more time to build the real stuff .

[@anvarichn]

Great video! I think, Typescript version of that would be event more valuable!

[@kenwanjohi5128]

can't thank you enough..very helpful

[@academind]

Glad it helped

[@Montclairsoccer1]

Really great video!

[@academind]

Glad you liked it!

[@KidJV]

thanks! subscribed

[@aburaihan-py4vi]

Excellent!

[@AmanNidhi]

which one do you prefer? There are so many ways to style a react app, which one is better and which one has the future?

[@juancamiloq1]

Awesome videos

[@mahmoudnoby6204]

can you help me .. I am confused which is more better when building angular app bootstrap or angular material ..I hope to help me

[@ElderESG]

This is gold❤

[@Kanexxable]

Can you please do a video about model view controller vs model view view model. And how they apply in Vue angular and react. I have no idea what a view model is and what it looks like at all. In Vue is the root Vue instance the view model. I don’t get it. Yes I’m now starting to learn typescript and don’t know how well I should use it before going to angular.

[@TechnoDB]

Helpful video.. :)

[@oleksiisytar9872]

Great things, but what about SCSS, or LESS files, is it working the same?

[@HoangHuy-nq1if]

good job

[@ronmilich123]

Are you single Max? Best tutor ever!!!!

[@mjmagic12]

How do you use google fonts with styled components?

[@MERNStack]

hope syntax highlights for styled components will be supported in vs code

[@vaibhavm1986]

Hey Max I have to do set up for new project kind of confused between webpack and create react app... Could you please guide...so that it becomes easier to decide

[@mbround18]

Create react app uses webpack. My suggestion is use create React app of your unsure what you are doing and or try suing alternatives like parcel or fuse-box.

[@lullalullafy]

Excellent

[@drdDavi]

40% of my react knowledge comes from this channel!

[@muchvibrant]

what about the other 60%?

[@MistaT44]

@@muchvibrant Practice

[@lukaszwalczak3814]

@@MistaT44 Golden answer :)

[@RonaldJayBuayan]

import css is only dynamically inject on dev however on distribution build its compiled in one css.. i was hoping it was going to be injected in build too so it be separated from the main and would be beneficial to the initial load time.. is there a way to achieve this?

[@matheustavares4442]

omg, i bought you react couser and youtube recommend you

[@almakay01]

I feel like styled components are so cool!

[@vikramingleshwar5732]

vielen danke, god bless you.

[@turbulantarchitect5286]

what are the cons to use both - css file and styled components?

[@MichaelSalo]

14:50 I'm surprised the pseudo class selector is written without an ampersand here. Is this correct?

[@Robin-il8nc]

I'm currently starting a new React Project and im pretty new to it. My preferred way of writing CSS would be modules with scss. But how do you handle and structure global or Responsive Styling?

[@pulga961]

bootstrap for responsive. you can create global styles.

[@abdelaesus6678]

so perfect

[@pratibhalovesu]

Max can u make a styled component videos or tutorial

[@micoberss5579]

For using CSS modules in CRA, dont you need to eject the project and tweak lines in webpack settings?

[@academind]

You can do that, too - in newer versions of CRA, you can use the built-in functionality as well though.

[@ebrahimjamal449]

sir plz react short key for example racc press which keyboard key

[@Trazynn]

Why is this 3 year old video the only video on KZbin that explains styled components properly?

[@AnthonyPaulT]

Max so what method is your preferred method?

[@suki5593]

More angular and Ionic please

[@fxnoob]

good stuff.

[@mubarkmurtda4735]

Best way is to use sass module's unless you are using material ui so you can use jss.... although styled components is good there bundle size is huge

[@unmeymahaddalkar4842]

I was just looking at which framework to use to style react components!

[@divyanshubhatnagar4601]

How to remove unused css using the css modules and webpack or maybe some other way?

[@kostiantyn187]

The best way to understand that something is not used is by using the styled-components, your IDE automatically shows to you what you've not used. For CSS modules you've to use the POST CSS & webpack config to rid of some unused css, but you'll have such shitty unused code in the codebase, that is why I do not prefer the pure css solutions any more

[@dallindavis2131]

Who needs a university education when you have Max?

[@hiteshsuthar1097]

Now i knew why search engines recommends me Styled Components Vs CSS Modules when i search for css modules🤣

[@javadmohammadi3943]

very powerfull

[@aleksd286]

Been using styled components for almost a year now. It's purely amazing. Please don't forget to mention theme providers..

[@vaibhavm1986]

Hi Alesk, did u get chance to notice whether final css is injected like link rel or it gets injected directly in DOM because if it gets directly gets injected in dom then bundle size would increase?

[@aleksd286]

@@vaibhavm1986 it gets injected into the dom, each styled component receives a randomly generated class name, that refers to some css styles

[@vaibhavm1986]

@@aleksd286 u are using webpack or cra... To reduce bundle size are you using lazy imports? Else all styles injection into Dom would make bundle size bigger?

[@aleksd286]

@@vaibhavm1986 I am using nextjs, it comes with webpack by default

[@vaibhavm1986]

@@aleksd286 oh ok cool 🙂

[@meghalbisht6768]

23:45 is when you get module css!

[@zetiraid9857]

this is what I waiting for .. thanks

[@Ziberac]

What IDE/Editor is this?

[@academind]

It's Visual Studio Code.

[@911madza]

Your thoughts on reactstrap?

[@chispablo]

bootstrap as itself is losing a lot of popularity, a lot of people are going back to pure CSS, just as it happened with jQuery and people went back to vanilla JS. So reactstrap IMO is not that good if you want your site to have a distinguished style, but it's pretty good if CSS is not your forte

[@aleksd286]

pointless. does not achieve much nowadays. for a grid you have CSS grid, for all other things you do them separately or use things that are react based already, like MaterialUI for React, for Vuetify or VueJs, these have much more options. Bootstrap is out-dated.

[@user-yk3if2ku4e]

Maybe you will create a course about optimization in React?

[@sumanth3036]

I like of conventional css files

[@Cdswjp]

what's the best way to write css these days?

[@jyotipandey9218]

Styled components do not seem to work on internet explorer though.

[@RoyerAdames]

Crear content thank you

[@Timur21]

I like css modules the best I think. Radium is also not too bad, but sometimes when inspecting the tree of react components, it's annoying to just see Radium Components everywhere...

[@greenshaheen6716]

Awesome! Please make a video on how to learn from courses like ur udemy courses . And what is best way to learn from courses

[@kiana5066]

Ever notice how round-about all these "solutions" are? Why not have something like Vue.js single-file components?

[@jeffersonribeiro1669]

Hi Max, looking handsome! I have question, where can I submit a video idea?

[@tranhuuthu991990]

writing css in style component has no hint as in normal css file. I was wondering why reactjs has so many third library and definition. also the style component look stupid and weird syntax The extending style works as oop design pattern, but react now is more functional pattern.

[@ibrahimkhurshid4339]

Thanks, pal !!! I was lost in what kind of CSS to use. Seems like component.module.css is the one I would go with...

[@moofymoo]

now styled-components allow to write: styled.div({color:'red'}); styled.div(props=>({color:props.color});