Introduction to Next.js Styling with Theme UI

Transcript from the "Styling with Theme UI" Lesson

[00:00:00]
>> You might see some funny stuff going on. Let's talk about this funny stuff. First of all, what is this? Why does this comment appear? This is a regular JavaScript comment, and if so, why is it lit up like that in VS code, VS code seems to know what it is.

[00:00:13] And then why am I importing JSX from theme UI but I'm not actually using it anywhere. I mean, other than these comments, I guess. And then the last thing, what is this sx property on a on these HTML elements? I don't remember these HTML elements having an sx property on them.

[00:00:32] Yes, let's talk about that. This is what Theme UI does. So the first thing is, this is what's called JavaScript. What was it, pragma. So, if you don't know what that means, who knows what that means? It's basically a hint or a directive to tell the compiler, which in this case will be Babel most likely that "Hey, I'm gonna let you know that when you go compile JSFs, I actually want you to use this JSX tool to compile JSX and not react", and it's actually for the same reason why you always have to import React to the top of your app.

[00:01:12] I don't know if you've ever realized, like, "why do I always have to re-import React inside of our JSX component, even though I never use it"? Well, it's because you need to, the compiler needs to know how to compile JSX. There's a JSX lib inside of here that tells the compiler how to do it.

[00:01:27] That's why you always have to import React on top of your file. And then the reacts you know, the Babel plugin and stuff knows how to get it from React and knows how to compile it. Well, we're not gonna use the React compiler, we're going to use this JSX compiler, which does the exact same thing as the React compiler, with the extra benefit of allowing us to use an sx property on every single element.

[00:01:50] And this xx property, basically you can think of this as inline styles. So if you were to put like a style prop on an element, and you were to add some styles to it, this is the same thing, except it has a different output. The output of this sx property is actually not going to be inline styles on your elements so you won't be able to go in the DOM and inspect the inline styles.

[00:02:09] This is actually going to create CSS for you and add it to the head of your document. It is going to be scoped as well. So it's going to scope it just like CSS modules do and it is going to, for every single page that you have there is going to create a link tag in a document.

[00:02:22] It's going to put that scope CSS in there. And then it's going to add class names to all your elements with those scopes' class names. So it's doing all of that for you for free, which I think is amazing. So not only do you get that, you get that nice ability of adding inline styles, but you also get to refer to theme variables here.

[00:02:40] So for instance, I have "primary", that's because I have a color called primary defined somewhere. And I can do shortcuts like BG, which is short for background. I don't have to do things like that. Or for instance, if I wanted to do something like padding left, I can say PL for padding left, not gonna put padding left here.

[00:02:56] So there's like a lot of really cool stuff in here that I highly recommend, and it's all TypeScript. So you can just get some autocomplete and see what's happening here, it's really cool. If you prefer not to be able to use like these shortcuts and these theme stuff, but you just want to do the just pure CSS, JSX I'm sorry, theme UI JSX, also as a CSS property here, too.

[00:03:18] That pretty much does the same thing minus the ability to interact with theme variables and app shortcuts. So this is just like pure CSS. This is like CSS plus theming. So really, really cool. So that's if you haven't figured it out right now, this is why I like Theme UI, because it's super simple.

[00:03:36] And in fact, you can even get rid of all of this, like this, and you can define these in your theme object as variants, so instead of putting all this in here, like I'm doing, I can say, I'm gonna make a header variants, and my theme, and like headers, and then I'm just gonna refer to it inside of my file.

[00:03:52] I'm just gonna refer to it, oops, in here, I was gonna say like variant equals header. And then that's it. And now you can literally define all your stuff in one place. So changing your styles for everything in your app is as simple as going to one file and changing in there.

[00:04:06] You never have to go look at a component again to change the style. Which in my experience is extremely helpful, because you can even get a designer to do it if you want. A designer could just come in here and just like change these objects and control exactly how the site looks like without the developer ever having to go look at JSX or anything like that, which to me is extremely powerful.

[00:04:25] So highly recommend checking out Theme UI. All right, so we got our nav components. The next thing we'll do, Any questions on that? That was a lot. I talked about pragma, compilers, directives, sx, any questions on that? And again, this is not specific to NextJS, this is just how I prefer and I think it's something I just want to talk about and talk about here.

[00:04:48] But the specific things are, you know, like I said, the how we use the providers and stuff like that this is specific that, actually Yes.
>> Can you compare Theme UI to tailwind? Yes. So I'm pretty sure, so Theme UI is associated with Gatsby. I'm not sure if Gatsby created Theme UI or something like that, but it's definitely associated with Gatsby.

[00:05:12] And I wanna say the folks at Tailwind also have something to do with Theme UI, as I read in a GitHub issue somewhere. But I'm pretty sure Theme UI is their next version of that. They took what they learned from Tailwind and they applied it to Theme UI.

[00:05:26] In fact, if you go to Theme UI, you can look there's a preset here. I don't know if it's on here, is it on here? Yeah, there's a Tailwind preset for Theme UI. So I think Tailwind is like the best example of how to get really good out of the box experience with CSS.

[00:05:46] The only thing about Tailwind is that right you're still using class names and stuff like that, but they're really good. Theme UI doesn't use class names. If you saw, I didn't write one single class name here at all. All my classes are generated for me. And then also, Theme UI is themeable like for instance, on this documentation website.

[00:06:09] The way that I'm able to switch between these two things is actually Theme UI. All I did was just create, I created two colors basically, that allowed me to switch between the on a certain variable so I can say I'll make a color mode called Black, here are the colors, I'll make a color mode called Light here are the colors, and then I can use a hook that Theme UI gives me to change between the color modes and it just automatically applies to everything.

[00:06:36] I didn't have to touch any single component. So it's Theme UI's mostly meant for like theming things and creating design systems and reusability. Plus, like tell when is more for like getting this app to look good, like as fast as possible. So it's a little different. As far as like how those two things work.

[00:06:54] I think Theme UI, and there's another tool that I'm going to talk about is very similar to Theme UI. These tools are just like the next level. On top of things like Tailwind, which I believe is the best CSS framework out there.
>> So this looks to be built on top of Emotion.

[00:07:07]
>> Yes.
>> Can you use the styled interface that Emotion has as well?
>> Yeah, you just have to import it like you normally do.
>> Sure. Thank you.
>> Yeah. But you can absolutely use, yeah, it's definitely built on top of Emotion. And which is a very loved and very well used CSS and JavaScript mechanism for React.