Styling ๐Ÿ’… your React components

Let's talk about styling. So far we've been using the style prop to kind of hack together our colors changing and stuff like that when we were focusing mostly on the logic of our components, but there are better ways to do that stuff. There are three basic approaches to styling react components, and they all have the same goal in mind. The idea is that you can build for yourself something like a UI tool kit where you have prestyled components that take care of themselves, and you put them anywhere on the page and they always look the same. So, a button is always a button. The component that you're using is taking care of its own styling, and it doesn't have to be decided by the rest of your applications.

You can think of this as modern separation of concerns. Instead of having CSS, HGMN and JavaScript dealing with different technologies, you have buttons, drop down, and whatever. Each component is supposed to come with its own logic, it's own incorporated styles, and everything else it needs to work as a component.

So, the three main approaches to styling your components are normal CSS, because your components are still being rendered into the dom, into normal HDML at the end of the day, so CSS and all the old stuff that you're used to still works, you can go for it. CSS modules which are like normal CSS except there's a compiler that takes it and says, okay, this CSS only applies to this component and doesn't cascade anywhere else. Then you have the style prop, which is the default way that comes bundled with react, and just gets very cumbersome and you have to write your CSS in Object and JavaScript notation. And you have the third way, which is my favorite way, and those are styled components.

The idea of styled components is that you have some special syntax that lets you embed CSS directly into your JavaScript so similar to how we have JSX embed HTML into JavaScript. And, I guess there's actually a fourth way as well. And, the fourth way is pretty good and it's something that you should probably use if you're not much of designer myself. And those are UI bootstrap, that give you basic bootstrap stuff, material design and I'm sure there's a bunch of others. Since this is a two minute video, we're not going to go into detail on each of those approaches, instead we're going to spend the next couple of days talking about styling your components, making them pretty and amazing and in each video, we're going to talk about the pros and cons of that video's approach.

Know someone who wants to learn React and its whole ecosystem? Share ๐Ÿ‘‡


Cheers,
~Swizec