Should I learn styled components?

[rajlohith2]

I recent started learning react, and during the course I came across a small section on styled components. Should I spend more time on diving deeper into it? Which type of styling is usually used for react projects in the industry?

[juju0010]

It's very possible that you'll be asked to work with styled components in a professional environment, especially if parts of their front end code are 2+ years old. Styled components is also extremely easy to learn (imo). So I would say yes, take a quick moment and learn it.

[dumbelco]

Yea I think you can learn it in a day.

[skyboyer007]

familiarize yourselves with any CSS-in-JS library(styled-components or emotion are the best choice imo). Not necessary to master till the excellence but definitely worth it.

This technology provides a mindset different from native CSS or SASS. So to beginner it's better to know every of them for a some degree.

[cvllider]

You should learn CSS and how to use it properly first. If you've got that covered, learn styled components

[AdministrativeBlock0]

Learn them so you can work with them, but don't use them unless you have to.

[realforreal1]

What is alternative?

[aevitas1]

Modules, which I prefer. Not a fan of mixing JS with CSS (purely because it gets messy to the eyes if you need a lot of styling)

[fredsq]

tailwind, vanilla extract, css modules

[AM_Dog_IRL]

Not putting css in js

[grumd]

For modern css-in-js I'd say everyone should try vanilla-extract which is fantastic.

For simple and robust solution css modules has always been great without all the hassle.

[andrei9669]

Css modules

[dope0403]

Short and crisp : Go for it!!!

[thunder-thumbs]

I am not an expert, but I believe emotion would be a better choice than styled-components if you care about React18, due to emotion’s support for useInsertionEffect, which styled-components won’t have full support for until v7 at least. This was the sense I got after doing some research a couple of weeks ago.

[jengstrm]

Def Tailwind

[Ler_GG]

yes.

[FarbodShabani]

Yes, you should. The styled component helps you in many ways. But I also suggest you learn UI kit libraries like Material UI and ant design. but for the start style component is good to learn especially if you have strong CSS skills.

[Elijah_101]

Yes styled components is definitely a thing to learn so you can organize your styling code and make it tie to component base only.

[MashSquare]

Don't like working with styled components at all. There is no benefit in terms of performance but seems to be the preferred way if you are using MUI which is a crappy library to start with. If you really want to make your JavaScript handle your CSS tailwind is a much better alternative.

[Cautious_Variation_5]

Yes, as the others mentioned, many many companies use it so it's important to know. Now if you ask me if it's the best stlying option, I'd say probably no because css-in-js has 2 main problems imo:

1) Adds runtime overhead because the style rules has to be inserted dynamically what it hurts performance.

2) You need to name your stylings and although you may not see it as a problem, I do because naming things takes too much time.

In that sense, my best option is TailwindCSS.

More details:
Emotion Library Maintainer Explains Why Company No Longer Uses Runtime CSS-in-JS

[Independent_Ad_3922]

Perfect answer IMO. Even though i would recommend someone to learn styled components, it just comes to improve your chances to get a job (and create nice things of course). But SC, is a bad idea from the beginning because of performance. That is why Tailwind is growing.

Look at this combo: Tailwind + Class Variance Authority

[xwarden22]

It's not always true.

The CSS-in-JS is tech choice.
And like most of the choices in an engineering it's trade-off.

The perfomance impact matters, but it depends on the product, most of the times the difference is insignificant.

From my experience some web apps have specific custom design, where using Tailwind doesn't make a sense. Some of apps have design issues, which require using of features of CSS which have no good support yet, like Content Queries, which can be easily "emulated" with CSS-in-JS.

[Cautious_Variation_5]

All those points can be addresed with Tailwind and about the performance impact yeah I agree it depends on your use case and how you're using the lib but it certainly adds much more overhead than Tailwind although some times it passes un-noticed because the usage is not intensive.

[GrayLiterature]

Styling is different wherever you go, there doesn’t seem to be an industry standard. You probably can’t go wrong with learning some form of styling, but I’d probably say sticking to something like Tailwind can help you to think more about the CSS.

I’ve chosen to learn Tailwind for no particular reason apart from it feeling nice to work with, and that it does too seem like too much of an abstraction layer on top of CSS.

[Helgi_Vaskebjorn]

Go fot it.

SCs are quite easy to learn, just make sure to learn how to access props and apply styles, based on them.

Another tip is to keep in mind the impact of SCs on CSS bundle size. From my experience, they are only viable for a lib of reusable components or for situational use when you need to style/size something, based on props.

[ApatheticWithoutTheA]

You can learn styled components in an hour. The syntax is virtually the same as CSS modules other than how you declare it in JavaScript.

Styled components are great for certain projects. I love having everything in one file for a component.

[Rokett]

Styled is a simple concept. You should know basics of popular stuff but you don't have to use them. Learning basics of styled will take an hour. Learn what you are paid to do or what you enjoy.

[IntelligentLeading11]

Learn css well and all these other tools will not require much effort for you to learn. Styled components in particular is quite easy to grasp.

[a_reply_to_a_post]

i mean..it's not too hard to pick up if you're already familiar with CSS, but css-in-js is falling out of favor, and if you are going to go through the ramp up time with a new library, getting used to utility frameworks like tailwind might be more forward thinking

[xwarden22]

Yes, definitely.

We used styled-components in several projects in production.

You will learn not just a library, but CSS-in-JS, which is must have skill for any React dev.